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;
        }();
  • 相关阅读:
    SharePoint Portal Server与SharePoint Services之间的关系
    配置Microsoft Visual SourceSafe 2005的局域网/Internet访
    Maven创建Web项目(idea)
    Maven入门(idea)
    Windows下搭建Vue脚手架CLI
    关于wince中的全屏显示
    ubuntu右键添加打开终端的快捷菜单[转]
    将CString转换成string ...
    090606日记
    Java中的InputStream和OutputStream
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html
Copyright © 2011-2022 走看看