滾動div而不是頁面

Question

我在網站上有一個燈箱我正在處理哪些行爲，如「查看源代碼」按鈕。背景變暗，出現信息源，但只有當您將鼠標放在該特定的div（或在此情況下爲pre）時纔會滾動。例如，我希望能夠將鼠標放在頁面的頂部並向下滾動，並且我希望主要的燈箱可以滾動。有很多代碼，所以我用：

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

我相信它會需要一些JavaScript或jQuery，但我不知道該去哪裏。

當您向下滾動並點擊「查看完整代碼」時，它出現在this page上。

任何想法？

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; 
});