轉(zhuǎn)載：https://www.cnblogs.com/jjxhp/p/11736066.html#_label0
一、滾輪事件的 js 寫法
二、jQuery寫法
三、參考
四、滾輪事件滾動(dòng)過(guò)快，事件觸發(fā)兩次

一、js

//判斷鼠標(biāo)滾輪滾動(dòng)方向 if (window.addEventListener){ //FF,火狐瀏覽器會(huì)識(shí)別該方法window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C//統(tǒng)一處理滾輪滾動(dòng)事件 function wheel(event){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {//IE、chrome瀏覽器使用的是wheelDelta，并且值為“正負(fù)120”delta = event.wheelDelta/120; //因?yàn)镮E、chrome等向下滾動(dòng)是負(fù)值，FF是正值，為了處理一致性，在此取反處理if (window.opera) delta = -delta;} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負(fù)3”delta = -event.detail/3;}if (delta) { handle(delta) }; }//上下滾動(dòng)時(shí)的具體處理函數(shù) function handle(delta) {if (delta <0){//向下滾動(dòng)console.log("向下") }else{//向上滾動(dòng)console.log("向上")} }

IE、chrome監(jiān)聽(tīng)的是wheelDelta,向下滾動(dòng)其值為-120；向上滾動(dòng)其值為120

FF監(jiān)聽(tīng)的是detail,向下滾動(dòng)其值為3；向上滾動(dòng)其值為-3

二、jQuery寫法

$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e){e.preventDefault();var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;var delta = Math.max(-1, Math.min(1, wheel) );if(delta<0){//向下滾動(dòng)console.log('向下滾動(dòng)');}else{//向上滾動(dòng)console.log('向上滾動(dòng)');} }

三、參考

淺談 Mousewheel 事件
js中鼠標(biāo)滾輪事件詳解
解析javascript中鼠標(biāo)滾輪事件

四、滾輪事件滾動(dòng)過(guò)快，事件觸發(fā)兩次

方案一：arguments.callee.timer

//判斷鼠標(biāo)滾輪滾動(dòng)方向 if (window.addEventListener){ //FF,火狐瀏覽器會(huì)識(shí)別該方法window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C//統(tǒng)一處理滾輪滾動(dòng)事件 var throldHold = 200; //兩次scroll事件觸發(fā)之間最小的事件間隔 function wheel(event){if(arguments.callee.timer) clearTimeout(arguments.callee.timer);arguments.callee.timer = setTimeout(function(){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {//IE、chrome瀏覽器使用的是wheelDelta，且值為“正負(fù)120”delta = event.wheelDelta/120; //因?yàn)镮E、chrome等向下滾動(dòng)是負(fù)值，FF是正值，為了處理一致性，在此取反處理if (window.opera) delta = -delta;} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負(fù)3”delta = -event.detail/3;}if (delta) { handle(delta) };}, throldHold) }//上下滾動(dòng)時(shí)的具體處理函數(shù) function handle(delta) {if (delta <0){//向下滾動(dòng)console.log("向下") }else{//向上滾動(dòng)console.log("向上")} }

方案二：使用 開關(guān) 和 延時(shí)器

//判斷鼠標(biāo)滾輪滾動(dòng)方向 if (window.addEventListener){ //FF,火狐瀏覽器會(huì)識(shí)別該方法window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C//統(tǒng)一處理滾輪滾動(dòng)事件 var throldHold = 200; //規(guī)定時(shí)間 var flag = true; //規(guī)定時(shí)間內(nèi)是否可以觸發(fā) var timer = null; function wheel(event){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {delta = event.wheelDelta/120; if (window.opera) delta = -delta;} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負(fù)3”delta = -event.detail/3;}if( flag && delta ){flag = false; //將開關(guān)設(shè)置為false，false期間內(nèi)不能觸發(fā)事件handle(delta, childDomArr); //首次可以觸發(fā)timer = setTimeout(function(){clearInterval(timer);flag = true; //規(guī)定時(shí)間到大后，將開關(guān)設(shè)置為true}, throldHold);} }//上下滾動(dòng)時(shí)的具體處理函數(shù) function handle(delta) {if (delta <0){//向下滾動(dòng)console.log("向下") }else{//向上滾動(dòng)console.log("向上")} }

總結(jié)

以上是生活随笔為你收集整理的鼠标滚轮事件及解决滚轮事件多次触发问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。