为上/下箭头添加侦听器时以编程方式控制滚动条

Question

https://jsfiddle.net/mhg0mzs3/

I am trying to enable the user navigate through the list using up/down arrows. And I am having trouble controlling the scrollbar automatically. That is, understanding when and to what extent to move the scrollbar as the user reaches last visible elements.

This question is most probably duplicate, but after spending some time, wansn't able to find analogue.

 $(document).on('keydown', function(e) { if (e.which === 40) { e.preventDefault(); var $selected = $('.selected'); if ($selected.next().length !== 0) { $('li').removeClass('selected'); $selected.next().addClass('selected'); } } if (e.which === 38) { e.preventDefault(); var $selected = $('.selected'); if ($selected.prev().length !== 0) { $('li').removeClass('selected'); $selected.prev().addClass('selected'); } } }); 

 li { height: 100px; border: solid; } li.selected { background: red; } ul { overflow-y: auto; width: 150px; height: 300px; list-style-type: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>A</li> <li>B</li> <li class='selected'>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> </ul> 

Answer 1

Rather than controlling the scrollbar itself, think of it as setting the scroll position of the list so that the selected item is in view.

You can read the offsetTop property (or offset().top in JQuery) to find the top offset of the selected item, and then adjust slightly to centre it.

This isn't perfect but it's close to what you want:

https://jsfiddle.net/mhg0mzs3/2/