jquery - 如何使溢出：自动容器跟随列表项迭代

Question

我有一个 div 容器集，overflow:auto其中包含许多<li>'s。我编写了一个简单的函数来在用户单击按钮或按下向上或向下箭头时更改突出显示的列表项。

唯一的问题是当用户单击迭代按钮时，突出显示的列表项在没有容器滚动条跟随的情况下进行迭代。我正在寻找一种方法来强制容器滚动条随着迭代滚动

这是我正在尝试做的一个例子：http: //jsfiddle.net/sadmicrowave/rwfUr/

请记住 - 向上和向下箭头使容器滚动（只要容器具有焦点），但迭代按钮不会。

重要- 我正在寻找 .scrollTo() 的替代品

Answer 1

.scrollIntoView()怎么样？

Answer 2

要以编程方式执行此操作，您需要获取项目的高度和框的高度。

何时滚动：（框的高度 - （突出显示的项目编号 * 项目高度）< 0） 使用 scrollTop 属性将列表滚动项目高度，而上面的则小于 0。

我希望这有帮助。

:: 编辑 :: 这仅在盒子高度正好是指定数量的列表项的大小时才有效。假设每个项目的高度为 20 像素，并且您希望列表框显示 10 个项目，那么您需要将列表框高度设置为 200 像素。