轉載：https://www.cnblogs.com/jjxhp/p/11736066.html#_label0
一、滾輪事件的 js 寫法
二、jQuery寫法
三、參考
四、滾輪事件滾動過快，事件觸發兩次

一、js

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

IE、chrome監聽的是wheelDelta,向下滾動其值為-120；向上滾動其值為120

FF監聽的是detail,向下滾動其值為3；向上滾動其值為-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){//向下滾動console.log('向下滾動');}else{//向上滾動console.log('向上滾動');} }

三、參考

淺談 Mousewheel 事件
js中鼠標滾輪事件詳解
解析javascript中鼠標滾輪事件

四、滾輪事件滾動過快，事件觸發兩次

方案一：arguments.callee.timer

//判斷鼠標滾輪滾動方向 if (window.addEventListener){ //FF,火狐瀏覽器會識別該方法window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C//統一處理滾輪滾動事件 var throldHold = 200; //兩次scroll事件觸發之間最小的事件間隔 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，且值為“正負120”delta = event.wheelDelta/120; //因為IE、chrome等向下滾動是負值，FF是正值，為了處理一致性，在此取反處理if (window.opera) delta = -delta;} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負3”delta = -event.detail/3;}if (delta) { handle(delta) };}, throldHold) }//上下滾動時的具體處理函數 function handle(delta) {if (delta <0){//向下滾動console.log("向下") }else{//向上滾動console.log("向上")} }

方案二：使用 開關 和 延時器

//判斷鼠標滾輪滾動方向 if (window.addEventListener){ //FF,火狐瀏覽器會識別該方法window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C//統一處理滾輪滾動事件 var throldHold = 200; //規定時間 var flag = true; //規定時間內是否可以觸發 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,其值為“正負3”delta = -event.detail/3;}if( flag && delta ){flag = false; //將開關設置為false，false期間內不能觸發事件handle(delta, childDomArr); //首次可以觸發timer = setTimeout(function(){clearInterval(timer);flag = true; //規定時間到大后，將開關設置為true}, throldHold);} }//上下滾動時的具體處理函數 function handle(delta) {if (delta <0){//向下滾動console.log("向下") }else{//向上滾動console.log("向上")} }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。