鼠标滚轮监听防“抖动”

在用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;
    }();
原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html