zoukankan      html  css  js  c++  java
  • 鼠标滚轮监听防“抖动”

    在用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;
        }();
  • 相关阅读:
    margin:0 auto; 为什么会失效
    vue 登录滑块验证
    layui table 添加序号列
    纯css :after 菜单后面添加“<”
    设置div为不可点击
    ubuntu中root用户在图形界面登录
    ubuntu root用户无法登录filezilla的问题
    ubuntu无法用putty登录
    解决ubuntu和windows电脑之间无法复制粘贴问题
    E: Unable to locate package ubuntu
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html
Copyright © 2011-2022 走看看