禁用鼠标滚轮上下滚动功能

Question

我有两个页面，以下是我无法实现的条件，请告诉我是否不可能。

1. 在一个页面中，我需要禁用鼠标滚轮向上滚动。因此，当我使用鼠标滚轮向上滚动时，页面不会滚动，但当我向下滚动时，页面会滚动。

2. 在另一个页面中，我希望完全相反，我需要禁用鼠标滚轮向下滚动。因此，当我向下滚动时，页面不会滚动，但当我向上滚动时，页面会滚动。

这就是我需要的全部内容，如果您认为我需要更多解释，请告诉我，谢谢。

- Bondsmith

---

不是这样的，我需要禁用鼠标滚轮的单独方向。 - Bondsmith

Answer 1

这段代码适用于id为"mydiv"的div元素。你可以将mydiv更改为body或任何其他想要的元素。这段代码在所有浏览器中都有效。

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

注意：请记得将溢出设置为auto或scroll，以使此功能正常工作。

一个可行的示例：点击这里

希望这能帮到你。

- jjchr

---

这个是可以工作的，但需要进行一些编辑 (1) var e = window.event || e; // 如果你使用 "var"，你会重写在参数中使用的变量 (2) 你需要使用严格比较来比较 delta 值（例如 delta === 1）. - Erik

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 链接

附注：警告。由于Chrome的较新版本默认将所有窗口事件视为被动事件，上述代码在Chrome中无法工作。我们会提供更好的解决方案并尽快更新此答案。

- Eternal1

---

抱歉，我已经有一段时间没有使用这段代码了。我已经自己纠正过来了。另外，我加了一个 fiddle。 - Eternal1

刚在Chrome中测试了你的fiddle，似乎不再起作用了。 - Nosajimiki

是的，不幸的是，Chrome默认使所有窗口事件变为被动的，这意味着它们无法被阻止。我会想出更好的解决方案，并暂时留下警告。 - Eternal1

将所有元素包装在<div id='foo'>中，并使用$('#foo').on('wheel', ...)即可。这样，您甚至可以指定哪些部分不可滚动。 - dibery

Answer 3

你可以尝试这个来禁用鼠标滚动。我知道这不是你的问题，但我相信它可能会对你有所帮助。

JS:

function disableMouseScroll() {
    return false;
}
document.onmousewheel=disableMouseScroll;

链接

- SK.

---

@TheLittlePig 谢谢你的提醒。最近我已经禁用了鼠标滚轮。所以我想尽可能地分享我的知识并将其发布。我认为这不是复制粘贴的问题，而是尽力帮助他人的问题。 - SK.