JavaScript 中的鼠标滚轮、滚轮和 DOMMouseScroll
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25204282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mousewheel,wheel and DOMMouseScroll in JavaScript
提问by enzian
DOMMouseScrollonly works for Firefox.
DOMMouseScroll仅适用于 Firefox。
wheelseems to work for both Firefox and chrome. What is this? Haven't found docs on this one.
wheel似乎适用于 Firefox 和 chrome。这是什么？没有找到关于这个的文档。
mousewheeldoesn't work for Firefox.
mousewheel不适用于 Firefox。
How should I use them, in order to gain best browser-compatibility.
我应该如何使用它们，以获得最佳的浏览器兼容性。
Example given:
给出的例子：
document.addEventListener('ScrollEvent', function(e){
DoSomething();
});
回答by Angel Politis
I would suggest that all three of them be used at the same time to cover all browsers.
我建议同时使用这三个来覆盖所有浏览器。
Notes:
笔记：
In versions of Firefox where both the
wheelandDOMMouseScrollevents are supported, we need a way to instruct the browser to execute onlywheeland not both. Something like the following:if ("onwheel" in window) ...The above check though, in the case of
IE9andIE10will fail, because even though these browsers support thewheelevent, they don't have theonwheelattribute in DOM elements. To counter that we can use a flag as shown later on.I believe the number returned by
e.deltaY,e.wheelDeltaande.detailis not useful other than helping us determine the direction of the scroll, so in the solution below-1and1will be returned.
在同时支持
wheel和DOMMouseScroll事件的 Firefox 版本中，我们需要一种方法来指示浏览器只执行wheel而不是同时执行。类似于以下内容：if ("onwheel" in window) ...上述检查虽然在的情况下
IE9，并IE10会失败，因为即使这些浏览器都支持的wheel情况下，他们没有onwheel在DOM元素属性。为了解决这个问题，我们可以使用稍后显示的标志。我相信
e.deltaY,e.wheelDeltaand返回的数字e.detail除了帮助我们确定滚动的方向外没有用处，因此在下面的解决方案中将返回-1and1。
Snippet:
片段：
/* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;
/* The function that will run when the events are triggered. */
function DoSomething (e) {
/* Check whether the wheel event is supported. */
if (e.type == "wheel") supportsWheel = true;
else if (supportsWheel) return;
/* Determine the direction of the scroll (< 0 → up, > 0 → down). */
var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
/* ... */
console.log(delta);
}
/* Add the event listeners for each event. */
document.addEventListener('wheel', DoSomething);
document.addEventListener('mousewheel', DoSomething);
document.addEventListener('DOMMouseScroll', DoSomething);Although almost 3 years have passed since the posting of the question, I believe people who stumble upon it in the future will benefit from this answer, so feel free to suggest/make improvements to it.
尽管自发布问题以来已经过去了将近 3 年，但我相信将来偶然发现它的人会从这个答案中受益，因此请随时提出建议/对其进行改进。
回答by Web Master
In case your goal would be prevent scrolling up and down, but browser gives you error due to DOM level is passive, just pass {passive: false} as the third argumentwithin .addEventListener method:
如果您的目标是防止上下滚动，但由于 DOM 级别是被动的，浏览器会给您错误，只需将{passive: false} 作为.addEventListener 方法中的第三个参数传递：
// Solution to this: https://www.chromestatus.com/features/6662647093133312
window.addEventListener("wheel", function (e) {e.preventDefault()}, {passive: false}); // no more mouse wheel scrolling [both sides]
// window.addEventListener("wheel", function (e) {e.preventDefault()}, {passive: true}); this is default behaviour
回答by arakno
You can feature detect wheel support like this:
您可以像这样使用检测轮支持：
var wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
then you can attach your event handler like so:
然后你可以像这样附加你的事件处理程序：
$("#wrapper").on(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
$("#Left").click();
} else if (e.deltaY <= 0) {
$("#Right").click();
}
});
or if using vanilla js:
或者如果使用 vanilla js：
document.getElementById("wrapper").addEventListener(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
$("#Left").click();
} else if (e.deltaY <= 0) {
$("#Right").click();
}
}, false);
reference: https://developer.mozilla.org/en-US/docs/Web/Events/wheel
参考：https: //developer.mozilla.org/en-US/docs/Web/Events/wheel
