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;
        }();
  • 相关阅读:
    01.Sencha ExtJS 6
    02.Sencha ExtJS 6
    关于Jquery的delegate绑定事件无效
    细说 Form (表单)
    Rquest Request[""];Request.Form[""];Request.QueryString[""]
    一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系
    vs 调试不进入断点
    HttpWebRequest类
    C# 利用 Windows服务模板 创建、安装与卸载Windows服务
    如何搭建win10 asp开发环境安装iis10
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html
Copyright © 2011-2022 走看看