JavaScript鼠标滚轮事件兼容性与跨浏览器处理详解

鼠标滚轮事件概述与规范差异

现代浏览器普遍支持鼠标滚轮交互，当用户滚动滚轮时会触发相应事件。尽管浏览器默认利用滚轮进行文档滚动或缩放，开发者仍可通过取消mousewheel事件的默认行为来阻止这些操作。虽然存在互操作性差异，但编写跨平台代码依然可行。除Firefox外，主流浏览器均支持“mousewheel”事件；Firefox则采用“DOMMouseScroll”事件；而3级DOM事件规范草案建议统一使用“wheel”事件名以替代“mousewheel”。

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox浏览器不支持标准的mousewheel事件。

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

以下展示了在Chrome和IE9浏览器中，向下滚动滚轮时在控制台输出的结果。

以下是Firefox浏览器中向下滚动滚轮时的控制台输出结果。

跨浏览器兼容性处理与属性转换

根据上述输出结果可知，可以使用非标准的DOMMouseScroll事件来替代mousewheel，并使用事件对象的detail属性来替代wheelDelta。需要注意的是，detail属性的缩放比率和正负符号与wheelDelta不同，将detail值乘以-40即可得到与wheelDelta相等的数值。

不同浏览器滚动方向判断逻辑

在Firefox以外的浏览器中，判断滚动方向主要依据wheelDelta属性。

经过测试，在Windows 7系统环境下，无论是IE7、IE10、Opera 12还是Safari 5.1，每次向下滚动时event.wheelDelta的值均为-120。

对于Firefox浏览器（Opera浏览器也存在类似情况），判断鼠标滚动方向的属性为event.detail，向下滚动时的值为3。

需要特别注意的是，Firefox浏览器中方向判断数值的正负与其他浏览器相反。在Firefox中，向下滚动返回正值，而其他浏览器向下滚动返回负值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件，经过测试IE9还是不支持，但是谷歌和火狐都支持，在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上即为本文关于JavaScript鼠标滚轮事件的全部内容，希望读者能够喜欢。