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

滚动div而不是页面

1 个答案: