mousewheel，wheel和DOMMouseScroll在JavaScript中 [英] mousewheel,wheel and DOMMouseScroll in JavaScript

问题描述

>似乎适用于Firefox和chrome。这是什么？没有找到这个文件。

mousewheel 不适用于Firefox。

为了获得最佳浏览器兼容性，我应该如何使用它们。

给出的示例：

  document.addEventListener（'ScrollEvent'，function（e）{
 DoSomething（）; 
}）; 
  

解决方案

我建议将其中三个用于同时覆盖所有浏览器。

注意：

1. 在Firefox的版本中， 轮 和 DOMMouseScroll 事件被支持，我们需要一种方法来指示浏览器只执行 轮 ，而不是两者。如下所示： if（onwheel在窗口中）...
   




2. 上述检查虽然在 IE9 和 IE10 将失败，因为即使这些浏览器支持 轮 事件，他们没有 onwheel 属性。为了反驳我们可以使用下面所示的标志。




3. 我相信 e.deltaY ， e.wheelDelta 和 e.detail 除了帮助我们确定滚动的方向以外，因此在下面的解决方案 -1 和 1 将被退回。

片段：

  / *它决定是否支持车轮事件。 * / var supportsWheel = false; / *触发事件时运行的函数。 * / function DoSomething（e）{/ *检查轮事件是否受支持。 * / if（e.type ==wheel）supportsWheel = true; else if（supportsWheel）return; / *确定滚动的方向（< 0→向上，> 0→向下）。 * / var delta =（（e.deltaY || -e.wheelDelta || e.detail）>>> 10）|| 1; / * ... * / console.log（delta）;} / *为每个事件添加事件侦听器。 * / document.addEventListener（'wheel'，DoSomething）; document.addEventListener（'mousewheel'，DoSomething）; document.addEventListener（'DOMMouseScroll'，DoSomething）;  

/ div>

---

自从发布问题已经过去了3年了相信今后绊倒的人会受益于这个答案，所以请随便提出建议/做出改进。

DOMMouseScroll only works for Firefox.

wheel seems to work for both Firefox and chrome. What is this? Haven't found docs on this one.

mousewheel doesn't work for Firefox.

How should I use them, in order to gain best browser-compatibility.

Example given:

document.addEventListener('ScrollEvent', function(e){
   DoSomething();
});

解决方案

I would suggest that all three of them be used at the same time to cover all browsers.

Notes:

1. In versions of Firefox where both the wheel and DOMMouseScroll events are supported, we need a way to instruct the browser to execute only wheel and not both. Something like the following:if ("onwheel" in window) ...
   

2. The above check though, in the case of IE9 and IE10 will fail, because even though these browsers support the wheel event, they don't have the onwheel attribute in DOM elements. To counter that we can use a flag as shown later on.

3. I believe the number returned by e.deltaY, e.wheelDelta and e.detail is not useful other than helping us determine the direction of the scroll, so in the solution below -1 and 1 will be returned.

Snippet:

/* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;

/* The function that will run when the event 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.

这篇关于mousewheel，wheel和DOMMouseScroll在JavaScript中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！