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

Cross-browser method to disable vertical scrolling of window using JS/jQuery

本文关键字：窗口 JS jQuery 滚动 垂直 浏览器 方法      更新时间：2023-09-26

当我mouseover特定的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);
});

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

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);
工作的例子。

相关文章：