How to make autoscroll on overflowed list with arrow keys navigation?

Question

I made arrow navigation for my list, but the problem is my list has scroll and selected item finally goes down beyond the limits of my container. It would be perfect if my container's scroll was going down with the selected item. Can somebody hint me how to solve this?

  $(function() { $(document).on('keydown', function(e) { switch (e.which) { case 40: e.preventDefault(); $('li:not(:last-child).selected').removeClass('selected') .next() .addClass('selected'); break; case 38: e.preventDefault(); $('li:not(:first-child).selected').removeClass('selected') .prev() .addClass('selected'); } }) }) 

 ul { padding: 0; list-style: none; max-height: 100px; overflow: scroll; } li.selected { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="selected">item #1</li> <li>item #2</li> <li>item #3</li> <li>item #4</li> <li>item #5</li> <li>item #6</li> <li>item #7</li> <li>item #8</li> <li>item #9</li> <li>item #10</li> <li>item #11</li> </ul> 

Answer 1

  $(function() { $(document).on('keydown', function(e) { switch (e.which) { case 40: e.preventDefault(); $('li:not(:last-child).selected').removeClass('selected') .next() .addClass('selected'); break; case 38: e.preventDefault(); $('li:not(:first-child).selected').removeClass('selected') .prev() .addClass('selected'); } //scroll to element: $("ul").scrollTop(0);//set to top $("ul").scrollTop($('li.selected').offset().top - $('li.selected').height()); }) }) 

 ul { padding: 0; list-style: none; max-height: 100px; overflow: scroll; } li.selected { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="selected">item #1</li> <li>item #2</li> <li>item #3</li> <li>item #4</li> <li>item #5</li> <li>item #6</li> <li>item #7</li> <li>item #8</li> <li>item #9</li> <li>item #10</li> <li>item #11</li> </ul> 

You can try above snippet. To set the scroll to the selected li element.

Answer 2

You can also add tabindex to all list items. Give focus to selected element. That should solve your problem.

 $(function() { $('li').attr('tabindex', 0); $(document).on('keydown', function(e) { switch (e.which) { case 40: e.preventDefault(); $('li:not(:last-child).selected').removeClass('selected') .next() .addClass('selected') .focus(); break; case 38: e.preventDefault(); $('li:not(:first-child).selected').removeClass('selected') .prev() .addClass('selected') .focus(); } }) }) 

 ul { padding: 0; list-style: none; max-height: 100px; overflow: scroll; } li.selected { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="selected">item #1</li> <li>item #2</li> <li>item #3</li> <li>item #4</li> <li>item #5</li> <li>item #6</li> <li>item #7</li> <li>item #8</li> <li>item #9</li> <li>item #10</li> <li>item #11</li> </ul>