來源：http://www.denisdeng.com/?p=685
相信用戶在瀏覽Google Map 時，都注意到向上或向下滾動鼠標可以使地圖放大或縮小。其實，對於鼠標滾動我們並不陌生。但要給一個元素綁定鼠標滾動事件，我們有必要對該事件有一個詳盡的了解。
瀏覽器對該事件支持情況如何？IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件，在FF 3.x中，與之相當的是“DOMMouseScroll”事件。“onmousewheel”作為事件名，不為其識別。所以，為了保證能在每個瀏覽器中都能運行，就需要針對不同的瀏覽器來綁定不同的事件。
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x if(document.attachEvent) //if IE (and Opera depending on user setting) document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')}) else if(document.addEventListener) //WC3 browsers document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
上面的代碼給document綁定了mousewheel事件，並能在所有瀏覽器中運行。但是，鼠標每向上或向下移動一次，滾動了多少？當該事件觸發時，在non-FF瀏覽器中，記錄其距離的是“wheelDelta”，它返回的總是120的倍數（120表明mouse向上滾動，－120表明鼠標向下滾動）。在FF中，記錄其滾動距離的是“detail”屬性，它返回的是3的倍數（3表明mouse向下滾動，－3表明mouse向上滾動）。
需要注意的是，Opera 響應“onmousewheel”事件時，它同時擁有“wheelDelta”和“detail”屬性。其“detail”屬性返回的值與FF中相同。因此，對Opera 應該用“detail”屬性來mouse滾動的距離。在觸發滾動事件時，我希望得到整數1或－1。通過上面的分析，我們可以很輕松的得到我們想要的值，對於“wheelDelta”，只需要除以120，對於“detail”,將其除以3即可。
function displayDelta(e){ var evt =window.event ||e; var delta =evt.detail ?-evt.detail /3: evt.wheelDelta /120; return delta ; }
有了上面的分析，我們可以構建自己的函數為一個對象綁定mousewheel事件。即：
function wheel(obj, fn ,useCapture){ var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x if(obj.attachEvent) //if IE (and Opera depending on user setting) obj.attachEvent("on"+mousewheelevt, handler, useCapture); elseif(obj.addEventListener) //WC3 browsers obj.addEventListener(mousewheelevt, handler, useCapture); function handler(event) { var delta =0; var event =window.event ||event ; var delta =event.detail ?-event.detail/3 : event.wheelDelta/120; if(event.preventDefault) event.preventDefault(); event.returnValue =false; return fn.apply(obj, [event, delta]); } }
其他一些onmousewheel的用法
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滾輪取值效果 -http://www.jb51.net/</title> </head> <body> <p><label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p> <p><label for="detail">滾動值:(Firefox)</label><input type="text" id="detail" /></p> <script type="text/javascript"> var oTxt=document.getElementById("txt"); /*********************** * 函數：判斷滾輪滾動方向 * 作者：walkingp * 參數：event * 返回：滾輪方向 1：向上 -1：向下 *************************/ var scrollFunc=function(e){ var direct=0; 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; } ScrollText(direct); } /*注冊事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </script> </body> </html>
注：“window.onmousewheel=document.onmousewheel”在chrome，opera，safari中會觸發兩次事件，可檢測瀏覽器來區分。ie下僅支持“document.onmousewheel”事件。
IE/Opera屬於同一類型，使用attachEvent即可添加滾輪事件。
/*IE注冊事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
Firefox使用addEventListener添加滾輪事件
/*Firefox注冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
Safari與Chrome屬於同一類型，可使用HTML DOM方式添加事件
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式
/*注冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
也可以這樣
if(document.attachEvent){document.attachEvent("on"+mousewheel, scrollFunc)}//ie
if(document.addEventListener){document.addEventListener(mousewheel, scrollFunc, false)}//Opera/Chrome/safari
判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個 值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){alert(e.wheelDelta);//IE/Opera/Chrome ±120
}
else if(e.detail){alert(e.detail)//Firefox ±3
}