監聽鼠標上下滾動事件

js如何判斷滾輪的上下滾動，咱們應該都見到過這種效果，用鼠標滾輪實現某個表單內的數字向上滾動就增長，向下滾動就減小的操做，這種效果是經過 js對鼠標滾輪的事件監聽來實現的。今天簡單的研究了一下如何使用javascript來判斷鼠標是向上滾動仍是向下滾動，簡要分享。

首先，不得不說一下，由於不一樣的瀏覽器有 不一樣的滾輪事件。主要是有兩種，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），關於這兩 個事件這裏不作詳述，想要了解的朋友請移步：鼠標滾輪(mousewheel)和DOMMouseScroll事件，因此在這個過程當中須要添加事件監聽， 代碼以下：兼容firefox採用addEventListener監聽。

/*註冊事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

另外判斷滾輪向上或向下滾動在瀏覽器中也要考慮兼容性，如今五大瀏覽器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其他四類使用wheelDelta；二者只在取值上不一致，表明含義倒是一致的，detail只取±3，wheelDelta只 取±120，其中正數表示爲向上，負數表示向下。
 
具體的示例代碼以下所示：

<label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滾動值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
    ee=e || window.event;
    var t1=document.getElementById("wheelDelta");
    var t2=document.getElementById("detail");
    if(e.wheelDelta){//IE/Opera/Chrome
        t1.value=e.wheelDelta;
    }else if(e.detail){//Firefox
        t2.value=e.detail;
    }
}
/*註冊事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>

經過運行上述代碼咱們能夠得出如下結果：

在非firefox瀏覽器中，滾輪向上滾動返回的數值是120，向下滾動返回-120
 
而在firefox瀏覽器中，滾輪向上滾動返回的數值是-3，向下滾動返回3
 
代碼部分以下，e.wheelDelta是判斷是否爲非firefox瀏覽器，e.detail爲firefox瀏覽器

if(e.wheelDelta){//IE/Opera/Chrome
    t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
    t2.value=e.detail;
}

 

轉載請註明：代碼家園 » JS判斷鼠標向上滾動仍是向下滾動