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

Question

我有20个列表项，每次只能显示5个div。滚动到项目＃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); 

Answer 2

我已经调整了格伦·莫斯的回答占的事实，溢出DIV可能不会在页面的顶部。

parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2) ) 

我在谷歌地图应用程序上使用这个响应模板。在分辨率> 800px时，列表位于地图的左侧。在决议< 800列表低于地图。

Answer 3

这是我自己的插件（将在列表顶部的元素位置专门为overflow-y : auto不能与overflow-x工作。！）：

注意：elem是元素的HTML选择器该页面将滚动到。任何的jQuery的支持，如：#myid，div.myclass，$(jquery object)，[DOM对象]等

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 

注：#innerItem可以在里面#overflow_div任何地方。它并不一定是一个直接的孩子。

在Firefox（23）和Chrome（28）中测试。

如果要滚动整个页面，请选择this question。

Answer 4

用它打了很长一段时间后，这是我想出了：

jQuery.fn.scrollTo = function (elem) { 
     var b = $(elem); 
     this.scrollTop(b.position().top + b.height() - this.height()); 
    }; 

，我这样称呼它

$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]'); 

Answer 5

以上答案将内元素位置即使溢出元素位于溢出元素内部，也位于溢出元素的顶部。我不想这样做，所以我修改它，以便在元素处于视图中时不更改滚动位置。

jQuery.fn.scrollTo = function(elem, speed) { 
    var $this = jQuery(this); 
    var $this_top = $this.offset().top; 
    var $this_bottom = $this_top + $this.height(); 
    var $elem = jQuery(elem); 
    var $elem_top = $elem.offset().top; 
    var $elem_bottom = $elem_top + $elem.height(); 

    if ($elem_top > $this_top && $elem_bottom < $this_bottom) { 
     // in view so don't do anything 
     return; 
    } 
    var new_scroll_top; 
    if ($elem_top < $this_top) { 
     new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top}; 
    } else { 
     new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()}; 
    } 
    $this.animate(new_scroll_top, speed === undefined ? 100 : speed); 
    return this; 
};