JQuery：如何在Scroll窗口中进行DIV聚焦？

Question

我有以下HTML / CSS：

#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}

<div id="scrollpanel">
    <div class="listing ref_1">...</div>
    <div class="listing ref_2">...</div>
    <div class="listing ref_3">...</div>
    ...
</div>

如您所见，scrollpanel是一个滚动窗口，其高度为100px，宽度为200px。

如何以编程方式滚动scrollpanel滚动条/窗口以使特定DIV聚焦/可查看，即使该DIV当前不可见？

例如，假设我有10 DIV s（ref_1到ref_10）。根据{{​​1}}窗口的高度，一次只能查看3个ref_ DIV。现在让我们说我想让滚动条自动滚动到DIV scrollpanel，这是目前无法查看的。如何使用滚动窗口滚动并专注于ref_7？

Answer 1

使用jQuery ScrollTo插件，它很简单：

$('#scrollpanel').scrollTo('.ref_7');

Answer 2

您可以使用element.scrollIntoView()将元素滚动到视图中。

Answer 3

我会看看这个插件。

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

根据您的需要，如果您只想滚动，可能会有一个更简单的解决方案而不使用插件。