Auto scrolling inside the div

Question

i got a problem with scroll div. Code is like this

HTML:

ul {height: 100px; overflow: scroll;}
li {height: 25px;}

<ul id="sub-menu-active">
    <li><li>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
    <li class="current-menu-item"><li>
    <li><li>
    <li><li>
</ul>

All i need is auto scroll when page loaded ul#sub-menu-item to element with one of classes is li.current-menu-item. Can someone help me to find a method to do this.

_“Can someone help me to find a method to do this.”_ - sure, search engines can ... All you need to do is come up with some matching search terms. I’d start with something trivial such as “auto-scroll to anchor link on page load” ... what has kept you from making that minimal effort? — CBroe, Mar 14 '18 at 15:05
I spent a lot of time finding a solution to the problem, but for some reason I did not succeed in getting the result. My knowledge in JS is basic, and I myself can not find a solution; it seems that this platform was created to help with solving issues that we can not solve on our own. I'm not right? — Josh Hawen, Mar 14 '18 at 15:12
Yes, to help _you_ solve the issue/fix the problem, but not to do it completely _for you_. And if you can not even come up with a basic approach and or research at least a starting point, then this is rather too broad for this site. — CBroe, Mar 14 '18 at 15:17
As it turned out, the solution is 2 lines of code. I'm sure that the person who gave me the answer it was not very difficult to do, and if you were very controversial to yourself, and it was difficult for you to answer, just go ahead. — Josh Hawen, Mar 14 '18 at 15:25
It’s not about whether the question is hard or easy to answer for others, but about whether you make a basic effort to solve the problem yourself, or just come here to get you work done for you. The search terms I suggested would have brought up https://stackoverflow.com/q/9757625/1427878, and that has an answer that is basically the same as the one you got here now. — CBroe, Mar 14 '18 at 15:28
"auto scrolling to a element inside a scrollable div" That my finaly search terms. But i didnt find the answer. — Josh Hawen, Mar 14 '18 at 15:36

score 0 · Accepted Answer · answered Mar 14 '18 at 15:04

Run the script from the following snippet after the page has loaded to scroll the selected item into view:

var selected = document.querySelector('.current-menu-item');
selected.scrollIntoView();

ul {height: 100px; overflow: scroll;}
li {height: 25px;}

<ul id="sub-menu-active">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="current-menu-item">selected item</li>
    <li>item</li>
    <li>item</li>
</ul>

Its working, but can i scroll only #sub-menu-active, and not all page? — Josh Hawen, Mar 14 '18 at 15:26

score 0 · Answer 2 · answered Mar 14 '18 at 15:05

Try to insert everything into a div:

div {overflow: scroll;}
ul {height: 100px;}
li {height: 25px;}

<div id="box">    
        <ul id="sub-menu-active">
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li class="current-menu-item"><li>
            <li><li>
            <li><li>
        </ul>
</div>

score 0 · Answer 3 · answered Mar 14 '18 at 15:06

You can use scrollIntoView, but remember to check its compability in various browsers. Basically, using options (like the example below) is not supported in IE at all (simply omit the options alltogether).

HTML:

<ul id="sub-menu-active">
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li id="current-menu-item">THE TEXT WE WANT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
</ul>

JS:

let el = document.getElementById('current-menu-item')
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'end'
})

CSS:

ul {
  height: 100px;
  overflow: scroll;
}

JSFiddle: https://jsfiddle.net/zx47xdfm/3/

Auto scrolling inside the div

3 Answers3