当所选元素不可见时，滚动条不会滚动

Question

我们在无序列表中有许多列表项，我们一次可以看到五个列表项。当前选择的列表项具有自己的类（“选中”），当我们单击向上或向下时，下一个列表项将获得“选定”类，而前一个列表项将丢失它。我们如何做到这一点，当具有“选定”类的列表项出现在ul的可查看区域时，滚动条还将滚动“选定”项？

使用鼠标滚动很好，但是当单击向上/向下按钮时，所选类会更改，但不会滚动。在CSS中，ul的样式为overflow：auto。我试过更改溢出但它对结果没有影响。

编辑问题可以在这里看到：http://jsfiddle.net/E7MSN/63/ 单击文本框上的Enter，将出现一个下拉列表。然后使用键盘向上/向下箭头，继续前进，直到您越界。请注意，滚动不遵循“selected”元素。

Answer 1

使用scrollTop上下移动ul滚动位置。 所以在你的情况下：

$(".services ul").scrollTop($('li').index($(".selected")) * $('.services li').height());

在上面的代码中，$('li').index($(".selected"))获取当前所选li元素的编号。然后将此数字乘以每个li的高度。

Updated jsFiddle

您可能需要根据自己的喜好进行清理。

Answer 2

您是否尝试过style="overflow:scroll"？