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

Question

我正在阅读一些有关如何使页面的滚动条滚动div的溢出内容而不是页面滚动到某一点的信息。

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

如果用户向上滚动，以便div内容一直在顶部，页面应该恢复滚动并再次显示标题。

Answer 1

您可以使用元素的scrollTop property来完成此操作。首先，您需要确定标题的结束位置（滚动窗口的位置）：

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

然后你可以将窗口的滚动条设置为此位置：

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

一旦完成了这一操作，您就可以获得对您想要的任何元素的引用，然后滚动它的scrollTop位置（与上面的代码段相同的代码滚动window）。

最后你需要一个scroll event handler，这样你才能确定何时需要更改滚动内容的元素：

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