滚动div而不是页面

我在一个正在处理的网站上有一个灯箱，它的行为类似于“查看源”按钮。 背景变暗并显示源，但只有在鼠标hover在特定div时才会滚动（或者在此情况下为pre ）。 我想能够，例如，让我的鼠标在页面的顶角，向下滚动，我希望主灯箱滚动。 有很多代码所以我用过：

 overflow-x: hidden; overflow-y: scroll; 

我确定它需要一些JavaScript或jQuery，但我不知道在哪里。

当您向下滚动并单击“查看完整代码”时，会在此页面上显示。

有任何想法吗？

Answer 1

最直接的方式是： http ： //jsfiddle.net/pimvdb/Ezvnp/3/ 。

 $('body').bind('mousewheel', function(e) { // on scroll var $div = $('div'); // set div scroll top offset to current + extra from this scroll $div.scrollTop($div.scrollTop() - e.originalEvent.wheelDelta); return false; // prevent body scrolling }); 

要锁定/解锁滚动，您可以使用变量以便仅在该变量为true时锁定，例如： http ： //jsfiddle.net/pimvdb/Ezvnp/4/ 。

 var locked = true; $('body').bind('mousewheel', function(e) { if(locked) { var $div = $('div'); $div.scrollTop($div.scrollTop() - e.originalEvent.wheelDelta); return false; } }); $('button').click(function() { locked = !locked; });