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

How do I scroll to an element within an overflowed Div?

提问by mkoryak

I have 20 list items inside of a div that can only show 5 at a time. What is a good way to scroll to item #10, and then item #20? I know the height of all the items.

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

The scrollToplugin does this, but its source is not super easy to understand without really getting into it. I don't want to use this plugin.

该scrollTo插件做到了这一点，但如果没有真正深入了解它，它的来源并不是很容易理解。我不想使用这个插件。

Let's say I have a function that takes 2 elements $parentDiv, $innerListItem, neither $innerListItem.offset().topnor $innerListItem.positon().topgives me the correct scrollTop for $parentDiv.

比方说，我有一个功能，需要2元$parentDiv，$innerListItem，既不$innerListItem.offset().top也不$innerListItem.positon().top让我对$ parentDiv正确scrollTop的。

回答by Glenn Moss

The $innerListItem.position().topis actually relative to the .scrollTop()of its first positioned ancestor. So the way to calculate the correct $parentDiv.scrollTop()value is to begin by making sure that $parentDivis positioned. If it doesn't already have an explicit position, use position: relative. The elements $innerListItemand all its ancestors up to $parentDivneed to have no explicit position. Now you can scroll to the $innerListItemwith:

的$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);

回答by lepe

This is my own plugin (will position the element in top of the the list. Specially for overflow-y : auto. May not work with overflow-x!):

这是我自己的插件（将元素放在列表的顶部。专门用于overflow-y : auto. 可能不适用于overflow-x！）：

NOTE: elemis the HTML selector of an element which the page will be scrolled to. Anything supported by jQuery, like: #myid, div.myclass, $(jquery object), [dom object], etc.

注意：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; 
};

If you don't need it to be animated, then use:

如果您不需要将其设置为动画，请使用：

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

How to use:

如何使用：

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

Note: #innerItemcan be anywhere inside #overflow_div. It doesn't really have to be a direct child.

注意：#innerItem可以在#overflow_div. 它不必真的是一个直系子。

Tested in Firefox (23) and Chrome (28).

在 Firefox (23) 和 Chrome (28) 中测试。

If you want to scroll the whole page, check this question.

如果要滚动整个页面，请检查此问题。

回答by KPheasey

I've adjusted Glenn Moss' answer to account for the fact that overflow div might not be at the top of the page.

我已经调整了 Glenn Moss 的答案，以解决溢出 div 可能不在页面顶部的事实。

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

I was using this on a google maps application with a responsive template. On resolution > 800px, the list was on the left side of the map. On resolution < 800 the list was below the map.

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

回答by mike

The above answers will position the inner element at the top of the overflow element even if it's in view inside the overflow element. I didn't want that so I modified it to not change the scroll position if the element is in view.

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

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

回答by trank

I write these 2 functions to make my life easier:

我编写了这两个函数来让我的生活更轻松：

function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight >= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

And use them:

并使用它们：

scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);

回答by bruce reeves

After playing with it for a very long time, this is what I came up with:

在玩了很长时间之后，这就是我想出的：

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

and I call it like this

我这样称呼它

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