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;
        }();
  • 相关阅读:
    获取SQLSERVER所有库 所有表 所有列 所有字段信息
    无法嵌入互操作类型,请改用适用的接口 的解决方法
    注册Com组件..
    IIS站点无法访问..点浏览IIS窗口直接关掉
    数据库日志文件的收缩
    由于目标机器积极拒绝,无法连接。
    Log4Net使用方法
    WindowsService 创建.安装.部署
    蓝桥杯题库基础练习字母图形
    修改IDEA默认模板
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html
Copyright © 2011-2022 走看看