鼠标滚轮,滚轮和DOMMouseScroll在JavaScript中

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事件,它们也没有onwheelDOM元素中的属性.为了反击,我们可以使用后面显示的标志.

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年,但我相信将来偶然发现它的人会从这个答案中受益,所以请随意建议/改进它.