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

Question

https://jsfiddle.net/mhg0mzs3/

我试图使用户使用上/下箭头浏览列表。 而且我无法自动控制滚动条。 也就是说，了解在用户到达最后一个可见元素时何时以及在何种程度上移动滚动条。

这个问题很可能是重复的，但是花了一些时间后，无法找到类似的问题。

 $(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

与其控制滚动条本身，不如将其视为设置列表的滚动位置，以便查看选定的项目。

您可以阅读offsetTop属性（或JQuery中的offset().top ）来找到所选项目的顶部偏移，然后对其进行稍微调整以使其居中。

这不是完美的，但是接近您想要的：

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