jquery - 如何滚动到溢出的 Div 中的元素？

Question

我在一个 div 中有 20 个列表项，一次只能显示 5 个。滚动到项目#10，然后是项目#20 的好方法是什么？我知道所有元素的高度。

scrollTo 插件可以做到这一点，但如果不真正深入了解它的源代码，就不太容易理解。 我不想使用这个插件。

假设我有一个函数，它采用 2 个元素 $parentDiv、$innerListItem，既不是 $innerListItem.offset().top 也不是$innerListItem.positon().top 为 $parentDiv 提供了正确的 scrollTop。

Answer 1

$innerListItem.position().top 实际上是相对于其第一个定位祖先的 .scrollTop()。因此，计算正确的 $parentDiv.scrollTop() 值的方法是首先确保 $parentDiv 已定位。如果它还没有明确的 position，请使用 position: relative。元素 $innerListItem 及其直到 $parentDiv 的所有祖先都不需要有明确的位置。现在您可以使用以下命令滚动到 $innerListItem:

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);