滚动 div 内容然后继续正文

Question

我有一个 div 容器，占屏幕的 80%，左右两个固定侧边栏，它们各占 10%。我的 div 非常大，所以我使用 overflow: hidden 来隐藏内容。当用户向下滚动时，它会忽略 div，只滚动 body。

现在，如果我将 div 设置为溢出：滚动，用户首先滚动 div，然后停止，并且不滚动正文。

最后，我注意到，如果我将鼠标悬停在 oveflow: scroll div 上，它会滚动，但如果我将鼠标悬停在固定侧边栏上，那么 body 会滚动。

所有这些行为都不是我需要的。我希望我的 div:hidden 首先从上到下滚动，当它接近尾声时，只有 body 开始滚动。

所以，我尝试检测，一旦我的 div 容器到达顶部，我就会这样做：

$(#myDiv").focus()，但是，如果鼠标悬停在固定的侧边栏上，正文会滚动。

是否有任何解决方案，使这项工作？特别是溢出：隐藏，似乎根本不可能滚动？

codepen.io/OrvaldMaxwell/pen/Yraryb 这是示例。我需要名为“scrollMeAutoPLS”的div先滚动，然后继续正文

Answer 1

简单：

$('#yourDiv').animate({ scrollTop:$('#yourDiv')[0].scrollHeight },800,function() {
    $('html,body').animate({ scrollTop:$(document).height() },800);
});

800 是以毫秒为单位的持续时间。