鼠标滚轮监听防“抖动”
在用js进行鼠标滚轮监听时,经常由于鼠标一下子滚多了,而触发了多次监听事件对应的函数,例如这里想做一个滚动页面
var wheelDeltaLinstner = function (){ var pageFlag = 0;//0表示第一頁 var maxPages = rightDiv.length-1;//全部的頁數 function pageChange(e){ //滚轮监听 e = e||window.event; if(e.wheelDelta){ var delta = e.wheelDelta; } else if(e.detail){ var delta = e.detail; } if(delta<0){//向下滚 pageFlag = pageFlag==maxPages? maxPages:pageFlag + 1; } else if(delta>0){//向下滚 pageFlag = pageFlag==0? 0:pageFlag - 1; } pageShow(pageFlag); //注册事件 if(document.addEventListener){document.addEventListener('DOMMouseScroll',pageChange,false);} document.onmousewheel = pageChange; }();
很容易出现滚轮一下子滚多了,页面直接滚到底部去了。我们想要的是就算一次滚多了,也只翻滚一个页面,等暂停一会,才能再滚动。
因此,解决的思路就是:在滚动一个页面完成后,关闭事件监听一段时间,这样,在这个时间内,不论滚轮滚动多少都只会滚动一个页面,等这个时间过后,又可以重新恢复滚动了。
function pageChange(e){ //滚轮监听 e = e||window.event; if(e.wheelDelta){ var delta = e.wheelDelta; } else if(e.detail){ var delta = e.detail; } if(delta<0){//向下滚 pageFlag = pageFlag==maxPages? maxPages:pageFlag + 1; } else if(delta>0){//向下滚 pageFlag = pageFlag==0? 0:pageFlag - 1; } pageShow(pageFlag); //为了防止一次滚动太凶而直接跳转到底部,先关闭监听一段时间后再开启 if(document.addEventListener){ document.addEventListener('DOMMouseScroll',null,false); } document.onmousewheel = null; setTimeout(function(){//再次重新注册 if(document.addEventListener){ document.addEventListener('DOMMouseScroll',pageChange,false); } document.onmousewheel = pageChange; },100); } //注册事件 if(document.addEventListener){document.addEventListener('DOMMouseScroll',pageChange,false);} document.onmousewheel = pageChange; }();