如何滚动到溢出Div内的元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

我有20个列表项,每次只能显示5个div。先滚动到项目#10,然后到项目#20的好方法是什么?我知道所有部件的高度。

scrollTo插件可以做到这一点,但是它的源代码并不是非常容易理解,我不想使用这个插件。

提问于
用户回答回答于

$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);
用户回答回答于

这是我自己的插件,将元素放置在列表的顶部,特别是for overflow-y : auto,可能不适用overflow-x

jQuery.fn.scrollTo = function(elem, speed) { 
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top 
    }, speed == undefined ? 1000 : speed); 
    return this; 
};

如果需要动画,使用:

jQuery.fn.scrollTo = function(elem) { 
    $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 
    return this; 
};

如何使用:

$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 

扫码关注云+社区