如何滚动到溢出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);

Answer 2

这是我自己的插件(将元素放在列表的顶部.特别适用于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)中测试过.

如果要滚动整个页面,请检查此问题.

Answer 3

我已经调整了Glenn Moss的答案,说明溢出div可能不在页面顶部.

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

我在带有响应模板的谷歌地图应用程序上使用它.在分辨率> 800px时,列表位于地图的左侧.在分辨率<800时,列表位于地图下方.

Answer 4

上面的答案将内部元素定位在溢出元素的顶部,即使它在溢出元素内部也是如此.我不想这样,所以如果元素在视图中,我修改它不会改变滚动位置.

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;
};