如何将页面滚动链接到 div 元素滚动?或者如何使用页面滚动滚动 div 元素

Question

所以我在滚动页面和一些包含内容的div 时遇到了问题。

页面底部有一个.container，页脚紧随其后。当用户到达页面底部时，应该可以继续滚动页面，但应该滚动.scrollable容器。

默认情况下，如果鼠标光标位于div 上，我们可以滚动.scrollablediv 的内容。但是我需要以某种方式将公共页面滚动链接到这个.scrollablediv的滚动。

如何解决这个问题？

这里是JSFiddle链接，使问题更清楚

Answer 1

$(window).on('mousewheel', function(e) {
    //scrolling bottom
    if(e.originalEvent.wheelDelta /120 <= 0) {
       //checks if we reached bottom
        if($(this).scrollTop() + $(this).height() == $(document).height()) {
            $('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
        } 
    }
});

编辑：经过大量挖掘，我设法构建了一个脚本，正是您需要的

注意：该事件目前绑定在mousewheel但还有更多类型的滚动，例如：拖动，单击，箭头键，我不知道可以覆盖所有这些功能并同时执行您想要的操作。

我叉了你的小提琴