javascript - JavaScript 中的鼠标滚轮、滚轮和 DOMMouseScroll

Question

DOMMouseScroll 仅适用于 Firefox。

wheel 似乎适用于 Firefox 和 chrome。这是什么？还没有找到关于这个的文档。

mousewheel 不适用于 Firefox。

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

给出的例子:

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

Answer 1

我建议同时使用这三个来覆盖所有浏览器。

注意事项:

1. 在同时支持 wheel 和 DOMMouseScroll 事件的 Firefox 版本中，我们需要一种指示浏览器仅执行 wheel 而不是两者都执行的方法。类似于以下内容:if ("onwheel"in window) ...
   

2. 上面的检查虽然在 IE9 和 IE10 的情况下会失败，因为尽管这些浏览器支持 wheel 事件，但它们在 DOM 元素中没有 onwheel 属性。为了解决这个问题，我们可以使用稍后显示的标志。

3. 我相信 e.deltaY、e.wheelDelta 和 返回的数字>e.detail 除了帮助我们确定滚动方向外没有其他用处，所以在下面的解决方案中 -1并且将返回 1。

片段:

/* 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);

---

虽然自问题发布以来已经过去了将近 3 年，但我相信将来偶然发现它的人会从这个答案中受益，所以请随时提出建议/对其进行改进。 😊