其中經我測試,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
detail與wheelDelta
判斷滾輪向上或向下在瀏覽器中也要考慮兼容性,現在五大瀏覽器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其餘四類使用wheelDelta;兩者只在取值上不一致,代表含義一致,detail與wheelDelta只各取兩個 值,detail只取±3,wheelDelta只取±120,其中正數表示爲向上,負數表示向下。
<p><label ="wheelDelta"> 滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p> <p><label ="detail"> 滾動值:(Firefox)</label><input type="text" id="detail" /></p> <script type="text/javascript"> oTxt=document.getElementById("txt" scrollFunc= direct=0=e || t1=document.getElementById("wheelDelta" t2=document.getElementById("detail"(e.wheelDelta){t1.value= (e.detail){t2.value= 'DOMMouseScroll',scrollFunc,window.onmousewheel=document.onmousewheel=scrollFunc;