禁用鼠标滚轮向上或向下滚动

Question

我有两页，这些是我无法达到的条件，如果无法实现，请告诉我。

1. 在一页中，我需要禁用鼠标滚轮向上滚动。因此，当我用鼠标滚轮向上滚动时，什么也没有发生，但是当我向下滚动时，页面会滚动。

2. 在另一页中，我想要完全相反的，我需要禁用鼠标滚轮向下滚动。所以当我向下滚动时什么也没有发生，但是当我向上滚动时页面会滚动。

这就是我真正需要的，但如果您认为我需要解释更多，请告诉我，谢谢。

Answer 1

此代码适用于 ID 为“mydiv”的 div。您可以将 mydiv 更改为正文或您想要的任何其他元素。该代码适用于所有浏览器。

JS：

var mydiv = document.getElementById("mydiv");
if (mydiv.addEventListener) {
    // IE9, Chrome, Safari, Opera
    mydiv.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    mydiv.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else 
    mydiv.attachEvent("onmousewheel", MouseWheelHandler);


function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if(delta==1)         // if mouse scrolls up
    {
         alert('up');  
    }
    if(delta==-1)        // if mouse scrolls down, we disable scrolling.
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    return false;
}

笔记：记住将溢出设置为自动或滚动以使此功能起作用。

一个工作示例： 单击此处

希望这可以帮助。

Answer 2

防止鼠标向下滚动的情况（鼠标向上滚动只需将比较运算符更改为“<”）：

$(window).on("wheel mousewheel", function(e){
    if(e.originalEvent.deltaY > 0) {
        e.preventDefault();
        return;
    } else if (e.originalEvent.wheelDeltaY < 0) {
        e.preventDefault();
        return;
    }    
});

由于跨浏览器问题，我们需要检查两个值。

jsFiddle 链接

PS警告。由于更高版本的 Chrome 决定默认将所有窗口事件视为被动事件，因此上面的代码在 Chrome 中不起作用。将提供更好的解决方案并尽快更新此答案。