JavaScript滑鼠滾輪事件

JavaScript滑鼠滾輪事件

IE6.0首先實現了滑鼠的滾輪事件，其良好的互動效果得到認可，隨後Opera、chrome、safari等主流瀏覽器都實現了該效果，不過存在著很大的相容問題。

大多數瀏覽器支援mousewheel事件操作，它可以在任何元素上觸發，最終冒泡到document或window對象；而在Firefox中，支援的是另外一種事件——DOMMouseScroll，其中最為特殊的是它必須用addEventListener方法實現，故一般進行如下處理

1      //設觸發的函數為fn
2      if(oDiv.addEventListener) {
3            oDiv.addEventListener('DOMMouseScroll',fn,false);
4        }
5      oDiv.onmousewheel = fn;

mousewheel觸發事件會有一個特殊的事件屬性——wheelDelta，當使用者向前滾動是，它的值是120的倍數，向後滾動時，它的值是-120的倍數。不過在Opera9.5之前的版本中，加號或減號是顛倒的；在Firefox中，並沒有wheelDelta屬性，而是detail屬性，與wheelDelta相比較，它不僅加號或減號顛倒，其值是3的倍數。為了相容加號或減號顛倒的問題，可以採取設定布爾值的解決方案。

//這是一個通過滑鼠滾輪改變div高度的函數
          function fn(ev) {
            var ev = ev || event;
            var b = true;
            if( ev.wheelDelta ) {
                b = ev.wheelDelta>0?true:false;
            } else {
                b = ev.detail<0?true:false;
            }
           
            if( b ) {
                oDiv.style.height = oDiv.offsetHeight - 10 +'px';
            } else {
                oDiv.style.height = oDiv.offsetHeight + 10 +'px';
            }
        }

在該函數中，向上滾動b為true，向下滾動b為false。

然而，如果頁面有捲軸的話，在div上滾動滾輪的時候，會觸發瀏覽器的預設事件。通常，我們用return false處理，可在addEventListener中，需要使用preventDefault函數來消除瀏覽器的預設事件。

//在上述fn函數的末尾加消除瀏覽器預設事件的操作
        if( ev.preventDefault ) {
                ev.preventDefault();
            }

            return false;

以上可以解決滑鼠滾輪事件帶來的大部分相容問題。

本文永久更新連結地址：https://www.bkjia.com/Linux/2018-03/151410.htm