javascript - 将页面滚动到某一点，然后仅使用一个滚动条开始滚动 div 的溢出内容

Question

我正在寻找有关如何使页面的滚动条在滚动到某个点后滚动 div 的溢出内容而不是页面的信息。

最终结果是将页面滚动到标题不再可见的程度，但从那时起滚动 div 的内容 - 使用主滚动条，而不是两个嵌套的滚动条。

如果用户向上滚动，使 div 内容再次完全位于顶部，页面应恢复滚动并再次显示标题。

Answer 1

您可以使用 scrollTop property 来做到这一点你的元素。首先，您需要确定 header 的结束位置(将窗口滚动到的位置):

var header = $('#header');
var headerBottom = header.offset().top + header.height();

然后您可以将窗口的滚动条动画化到这个位置:

$(window).animate({scrollTop: headerBottom});

一旦处理完毕，您将获得对您想要滚动的任何元素的引用，并为其 scrollTop 位置设置动画(与上面滚动 窗口的代码片段相同)。

最后你需要一个 scroll event handler这样您就可以确定何时该更改滚动内容的元素:

$(window).scroll(function(){
    // logic to determine which element should be scrolling
});