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;
        }();
  • 相关阅读:
    谁把天才变成了魔兽
    NetBeans 时事通讯(刊号 # 35 Nov 20, 2008)
    Java Annotation 手册
    《程序设计实践》读书笔记一
    5分钟让你明白金融危机爆发原因
    NetBeans 6.5 正式版可以下载了!
    Java Annotation 入门
    有关睡觉的学问
    oracle sql日期比较:
    C++编写安全OCX,IE不弹出安全提示
  • 原文地址:https://www.cnblogs.com/liuhanz/p/4865015.html
Copyright © 2011-2022 走看看