我们在无序列表中有许多列表项,我们一次可以看到其中五个。当前选定的列表项有自己的类(“selected”),当我们向上或向下单击时,下一个列表项将获得“selected”类,而前一个列表项会丢失它。我们如何做到当带有“selected”类的列表项走出ul的可视区域时,滚动条也会随着“selected”项滚动呢?
它可以用鼠标很好地滚动,但是当单击向上/向下按钮时,所选的类会发生变化,但不会滚动。在CSS中,ul的样式是overflow:auto。我尝试过更改溢出,但它对结果没有影响。
编辑问题可以在这里看到:http://jsfiddle.net/E7MSN/63/ 单击文本框上的 Enter,将出现一个下拉列表。然后使用键盘上/下箭头继续前进,直到超出界限。请注意,滚动不跟随“选定”元素。
最佳答案
使用scrollTop
上下移动ul
滚动位置。
所以在你的情况下:
$(".services ul").scrollTop($('li').index($(".selected")) * $('.services li').height());
在上面的代码中,$('li').index($(".selected"))
获取当前选定的li
元素的编号。然后将该数字乘以每个 li
的高度。
您可能需要根据自己的喜好进行清理。
关于javascript - 当所选元素不可见时,滚动条不会滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11403231/