javascript - 使用 JS/jQuery 禁用窗口垂直滚动的跨浏览器方法

Question

当我鼠标悬停特定div时，我需要禁用窗口滚动，并在mouseout上启用它。但有必要保留滚动条，因此 overflow:hidden 不会有帮助。

我写了一些 JS，但是在 IE9 和 Opera 中存在 bug。

var win_scrolltop, is_mydiv_mouseovered = false;
$('#mydiv').hover(
    function(){
        win_scrolltop = $(window).scrollTop();
        is_mydiv_mouseovered = true;
    },
    function() {
        is_mydiv_mouseovered = false;
    }
)
$(window).scroll(function() {
    if (is_mydiv_mouseovered) $(window).scrollTop(win_scrolltop);
});

Answer 1

我找到了this答案，摆弄了一下，结果是这样的:

var scrollThing = {
    // 33: PageUp, 34: PageDown, 35: End, 36: Home, 37: Left, 38: Up, 39: Right, 40: Down
    keys: [33, 34, 35, 36, 37, 38, 39, 40],
    preventDefault: function(e) {
        e = e || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false;
    },
    keydown: function(e) {
        for (var i = scrollThing.keys.length; i--;) {
            if (e.keyCode === scrollThing.keys[i]) {
                scrollThing.preventDefault(e);
                return;
            }
        }
    },
    disable: function() {
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = scrollThing.preventDefault;
        document.onkeydown = scrollThing.keydown;
    },
    enable: function() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    }
}
$('#mydiv').hover(scrollThing.disable, scrollThing.enable);

工作中example .