Прокрутите div вместо страницы

Question

У меня есть своего рода лайтбокс на веб-сайте, над которым я работаю, который действует как кнопка «Просмотр источника».Фон становится темным, и источник появляется, но будет прокручиваться только в том случае, если вы наведете указатель мыши на конкретный 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;
});