How can I scroll to an element inside a scrollable div?

Question

I have a parent container which has two child elements. The left element is a list of items returned from a database query. The parent container has a fixed height, so any items returned in the left panel are scrollable within that left panel, not the body.

When navigating to this page, I would like for the left panel to be positioned at the point of a matching element ID. This ID i will handle through Angular's routing subscriptions, but for demo purposes I have hard coded it here.

I have tried the code below (primarily the JS) with no luck. Any assistance would be greatly appreciated.

    var list = document.getElementById("list");
    var targetLi = document.getElementById('myID');
    list.scrollTop = (targetLi.offsetTop - 50);

#wrapper {
  width:1280px;
  height:600px;
  border:1px solid #d9d9d9;
  border-radius:5px;
  display:flex;
  margin:20px auto;
}

#list {
  width:200px;
  height:100%;
  border-right:1px solid #d9d9d9;
  display:flex;
  overflow:hidden;
}

#right span {
  color:#999;
  font-size:12px;
  font-family:helvetica;
}

ul {
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  overflow-y: scroll;
}

li {
  width:100%;
  padding:20px 10px;
  box-sizing:border-box;
  border-bottom:1px solid #d9d9d9;
  display:block;
  font-family:helvetica;
  color:#666;
}

<div id="wrapper">
  <div id="list"> 
    <ul>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>      <li>
      Item
      </li>      <li>
      Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li id="myID">
        Item with ID
      </li>

    </ul>
  </div>
  <div id="right"> 
    <button id="button">Demo purposes button</button>
    <span> Note: this would instead be called in 'ngAfterViewInit' or after the firestore query has completed.
  </div>
</div>

Seems like a duplicate (Angular is just JavaScript): https://stackoverflow.com/questions/27980084/scrolling-to-a-element-inside-a-scrollable-div-with-pure-javascript — isherwood, Aug 20 '19 at 12:59
Thanks, I have tried that, but it isn't working in angular (which is why I put angular here) - It might well just be my set up, I'm not entirely sure, but it's practically the same as the above. — , Aug 20 '19 at 13:18
Got it working thanks to your duplicate reference. @isherwood - Thank you. A mixture of data being returned and restructuring the HTML to allow for scrolling in a different way. — , Aug 20 '19 at 14:52

score 0 · Answer 1 · answered Aug 20 '19 at 12:57

The best (and AFAIK only) option that will work across all browsers is to implement a hidden input element (like a checkbox for example) and set the focus to that element. This way the browser will scroll the container so that the focused input is visible. The trick is not to set the styling to display: none but only make the element optically invisible, for example:

opacity: 0;
width: 0;
height: 0;
display: block;

How can I scroll to an element inside a scrollable div?

1 Answers1