JS滾輪事件onmousewheel使用介紹_javascript技巧

典型的應用時滑鼠滾輪滾動控制圖片或文字的大小，例如此類的轉動滑鼠滾輪實現縮放等等互動效果中，會用到 Mousewheel 事件。在大多數瀏覽器（IE6, IE7, IE8, Opera 10 , Safari 5 ）中，都提供了 “mousewheel” 事件。滾輪事件的兼容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是Firefox 3.5 卻不支持此事件，不過慶幸Firefox 3.5 中提供了另外一個等同的事件："DOMMouseScroll” ，相容程式碼如下：

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:

程式碼如下: 程式碼如下: mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; 「mousewheel」事件中的「event.wheelDelta」 屬性值：傳回的值，如果是正值說明滾輪是向上滾動，如果是負值說明滾輪是向下滾動；傳回的值，皆為120 的倍數，即：幅度大小= 傳回的值/ 120。 “DOMMouseScroll” 事件中的“event.detail” 屬性值：傳回的值，如果是負值說明滾輪是向上滾動（與“event.wheelDelta” 正好相反），如果是正值說明滾輪是向下滾動；傳回的值，皆為3 的倍數，即：幅度大小= 傳回的值/ 3。 「mousewheel」 事件在 Opera 10 中卻是個特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。