jQuery/CSS：在 div 内滚动而不是滚动 window

Question

我有这个：

<body>

    <div id="dummy_top_frame"></div>

    <div id="frame">
    
        <div id="container">
        
            content
        
        </div>
    
    </div>

</body>

html,
body,
#frame{
   -ms-overflow-style: none;
    scrollbar-width: none;
}
    
body::-webkit-scrollbar,
#frame::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}
    
body{
    margin:0px; 
    padding:0px;
    background:#333;
}

#dummy_top_frame{
    position:absolute;
    top:40px;
    width:598px;
    height:150px;
    left:50%;
    margin-left:-300px;
    border:1px solid white;
    border-bottom:none;
    background:black;
}
    
#frame{
    position:fixed;
    top:41px;
    width:600px;
    left:50%;
    margin-left:-300px;
    height: calc( 100% - 41px);
    overflow:scroll;
}
    
#container{
    position:relative;
    width:598px;
    border:1px solid white;
    border-top:none;
    margin-bottom:140px;
    background:black;
    color:white;
}

当我在 #container div 内滚动鼠标时，它的内容会上下滚动，我得到了我想要的整体效果。

但我希望#container div 在鼠标在正文上滚动时也能上下滚动。 无论我在页面上滚动到哪里，唯一应该移动的是容器 div 的内容。

我认为一个简单的 jQuery function 是合适的，因为这个解决方案经常在堆栈溢出中提出。

$(window).scroll(function(){
    $('#container').scrollTop($(this).scrollTop());
});

但这不起作用。 那么，如何在 #container div 外部滚动时滚动它呢？

这是一个 jsfiddle，可以看到它的实际效果： https://jsfiddle.net/ubhvmy8q/

谢谢

Answer 1

这有效：

$(window).on('mousewheel',function(event) {
    var scroll = $('#frame').scrollTop();
    $('#frame').scrollTop(scroll - event.originalEvent.wheelDeltaY);
});

谢谢。