转载：/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；向上滚动其值为120FF监听的是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("向上")}}
如果觉得《鼠标滚轮事件及解决滚轮事件多次触发问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
