我們都見到過這些效果，用鼠標滾輪實現某個表單內的數字增加減少操作，或者滾輪控制某個按鈕的左右，上下滾動。這些都是通過js對鼠標滾輪的事件監聽來實現的。今天這裡介紹的是一點簡單的js對於鼠標滾輪事件的監聽。
不同瀏覽器不同的事件
首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，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
js返回數值判斷滾輪上下
判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，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){
e=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;
}
PS：這裡再為大家推荐一款關於JS事件的在線查詢工具，歸納總結了JS常用的事件類型與函數功能：
javascript事件與功能說明大全：
http://tools.VeVB.COm/table/javascript_event