Make Div Focused And Visible In Scrollable Overflow

Question

Is there a way to make a element inside a div that is a list of items which has scrolling to be focused. My attempts have not been successful since it does make the element focused but it will not be visible since I would have to still scroll down to view the element.

<style>

#list {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 200px;
    width: 200px;
}

.item {
    width: 100%;
}

</style>

<div id="list">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item focus">Item I Want Focused</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
</div>

score 1 · Accepted Answer · answered Mar 15 '19 at 18:27

Use Element.scrollIntoView() to make the focused element visible:

const focused = document.querySelector('.focus')

focused.scrollIntoView({ behavior: 'smooth' })

#list {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 200px;
  width: 200px;
}

.item {
  width: 100%;
}

<div id="list">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item focus">Item I Want Focused</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Excellent! Is there a way to detect if an item is visible. I read up on the `scrollIntoView()` method and found out you can have it focused at the top or bottom of the scrolling list. — uionut351j, Mar 15 '19 at 19:35
Look at [Check if element is visible in DOM](https://stackoverflow.com/q/19669786/5157454) — Ori Drori, Mar 15 '19 at 19:39

Make Div Focused And Visible In Scrollable Overflow

1 Answers1