JS滚轮事件onmousewheel兼容性处理与属性详解

鼠标滚轮事件兼容性与代码实现

典型的应用时鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件。在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滚轮事件的兼容性差异有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll” ，兼容代码如下：

 
// isFirefox 是伪代码，大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
wheelDelta与detail属性解析在“mousewheel”事件中，可通过event.wheelDelta属性获取滚动方向与幅度。该属性返回正值时表示滚轮向上滚动，返回负值时表示向下滚动。其数值始终为120的倍数，因此实际滚动幅度可通过公式“返回的值 / 120”计算得出。
对于“DOMMouseScroll”事件，应关注event.detail属性。其返回值逻辑与wheelDelta相反：负值代表向上滚动，正值代表向下滚动。该属性的数值均为3的倍数，计算滚动幅度的公式为“返回的值 / 3”。
值得注意的是，Opera 10+浏览器是一个特例，它同时支持event.wheelDelta和event.detail两个属性，开发者在使用时需留意这一双重支持特性。