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

Question

我们在一个无序列表中有许多列表项，我们一次可以看到其中的五个。当前选中的列表项有自己的类(“选中”)，当我们向上或向下单击时，下一个列表项获得“选中”类，而前一个列表项失去它。我们如何做到当带有“selected”类的列表项从ul的可视区域出来时，滚动条也会随着“selected”项滚动？

它可以用鼠标滚动，但是当单击向上/向下按钮时，所选类会发生变化但不会滚动。在 CSS 中，ul 的样式设置为 overflow:auto。我试过更改溢出，但它对结果没有影响。

编辑问题可以在这里看到:http://jsfiddle.net/E7MSN/63/单击文本框上的输入，将出现一个下拉列表。然后使用键盘上/下箭头，继续前进，直到超出界限。请注意滚动不跟随“选定”元素。

Answer 1

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

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

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

Updated jsFiddle

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