快捷導(dǎo)航

解析javascript中鼠標(biāo)滾輪事件

更新時(shí)間：2015年05月26日 09:40:37 投稿：hebedich

這篇文章主要給大家詳細(xì)介紹了javascript中鼠標(biāo)滾輪事件，圖文并茂，十分的詳細(xì)，有需要的小伙伴可以參考下。

所有的現(xiàn)代瀏覽器都支持鼠標(biāo)滾輪，并且在用戶(hù)滾動(dòng)滾輪時(shí)觸發(fā)時(shí)間。瀏覽器通常使用鼠標(biāo)滾輪滾動(dòng)或縮放文檔，但可以通過(guò)取消mousewheel事件來(lái)阻止這些默認(rèn)操作。有一些互用性問(wèn)題影響滾輪事件，但是編寫(xiě)跨平臺(tái)的代碼依舊可以行。除了Firefox之外的所有瀏覽器都支持“mousewheel”事件，但Firefox使用“DOMMouseScroll”,而3級(jí)DOM事件規(guī)范草案建議使用事件名“wheel”替代“mousewheel”。

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox不支持mousewheel

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

以下滾輪向下滾動(dòng)是chrome和IE9下面控制臺(tái)輸出

以下是滾輪向下滾動(dòng)Firefox下面控制臺(tái)輸出

從上面輸出得出，可以使用非標(biāo)準(zhǔn)的DOMMouseScroll事件取代mousewheel，使用事件對(duì)象的detail屬性取代wheelDetal。但是，detail屬性值的縮放比率和正負(fù)符號(hào)不同于wheelDetal,detail值乘以-40和wheelDetal值相等。

在除了FireFox之外的瀏覽器下，滾動(dòng)的上下滾動(dòng)與否是下面這個(gè)wheelDelta有關(guān)。

根據(jù)測(cè)試，在我的win7系統(tǒng)下，無(wú)論IE7, IE10, Opera12,或者是safari5.1，每次往下滾動(dòng)event.wheelDelta值都是-120.

對(duì)于FireFox瀏覽器（Opera瀏覽器也有），判斷鼠標(biāo)滾動(dòng)方向的屬性為event.detail, 向下滾動(dòng)值為3.

需要注意的是，F(xiàn)ireFox瀏覽器的方向判斷的數(shù)值的正負(fù)與其他瀏覽器是相反的。FireFox瀏覽器向下滾動(dòng)是正值，而其他瀏覽器是負(fù)值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3級(jí)wheel事件，經(jīng)過(guò)測(cè)試IE9還是不支持，但是谷歌和火狐都支持，在谷歌內(nèi)有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: