js onmousewheel事件多次触发问题的解决

      PS:大家看到代码哪里有写的不好的地方，欢迎指正和提出您的意见和建议。

　　我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，后来在kk的帮助下，终于解决了这个问题，甚是欢喜，于是记录一下：

      我最初的代码是这样的：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <style>
 6             div {
 7                 width: 700px;
 8                 height: 1000px;
 9             }
10             .red {
11                 background-color: red;
12             }
13             .yellow {
14                 background-color: yellow;
15             }
16         </style>
17     </head>
18     <body>
19         <div class="red"> </div>
20         <div class="yellow"> </div>
21         <div class="red"> </div>
22         <div class="yellow"> </div>
23         <div class="red"> </div>
24     </body>
25     
26     <script src="../jQuery/jquery.min.js"></script>
27     <script src="test.js"></script>
28 </html>
 1 $(document).ready(function(){
 2     var height = $(window).height();  //获取浏览器窗口当前可见区域的大小
　　　　//鼠标滚动之后整屏切换
 3     var scrollFunc = function(e){
 4         var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 5         e = e || window.event;
 6         if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){  //不同浏览器向下滚动          
 7             $(document.body).animate({scrollTop:height}, "fast");
 8             $(document.documentElement).animate({scrollTop:height}, "fast");
 9         }else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){  //不同浏览器向上滚动
10             $(document.body).animate({scrollTop:0}, "fast");
11             $(document.documentElement).animate({scrollTop:0}, "fast");
12         }
13     };
　　　　//注册事件
14     if(document.addEventListener){
15         document.addEventListener('DOMMouseScroll',scrollFunc,false);
16     }
17     window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
18 });

      这样的代码我在IE和火狐下测试都是正常的，但是在谷歌下onmousewheel事件总是会触发多次，这是一个极其恼人的事情，为什么会多次触发呢？经过调试，我发现是我们每次滚动鼠标时都是很“凶残”的一下子滚动很大一个幅度，而不是一小格一小格的慢慢滚动，这就导致了滚动的时候会多次触发onmousewheel事件，调用scrollFunc函数，在函数内的animate函数没有执行完的时候还是不断的被调用，这样就会出现滚动多次滚动条滚不下来页滚不上去的情况。于是，我将上面的js代码改成了下面这样：

$(document).ready(function(){
    var height = $(window).height();
    var scrollFunc = function(e){
        document.onmousewheel = undefined;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        e = e || window.event;
        if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){            
            $(document.body).animate({scrollTop:height}, "fast","linear",function(){
                document.onmousewheel = scrollFunc;
            });
            $(document.documentElement).animate({scrollTop:height}, "fast","linear",function(){
                document.onmousewheel = scrollFunc;
            });
        }else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
            $(document.body).animate({scrollTop:0}, "fast","linear",function(){
                document.onmousewheel = scrollFunc;
            });
            $(document.documentElement).animate({scrollTop:0}, "fast","linear",function(){
                document.onmousewheel = scrollFunc;
            });
        }
    };
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }
    document.onmousewheel = scrollFunc;
});

好了，现在的代码已经能够正常运行了，不过由于我是一只菜鸟，代码写的不够精致，又被kk说了，在他的提示下，我将冗余的代码又进行了一番修改：

$(document).ready(function(){
    var height = $(window).height();
    var width = $(window).width();
    var body;
    if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
        body = document.documentElement;
    }else{
        body = document.body;
    }
    var isFinish = true;
    var scrollFunc = function(e){
        if(isFinish){
            var scrollTop = body.scrollTop;
            e = e || window.event;
            if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){            
                scroll(height);
            }else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
                scroll(0);
            }
        }
        
    };
    var scroll = function(height){
        isFinish = false;
        $(body).animate({scrollTop:height},"fast","linear",function(){
            isFinish = true;
        });
    };
    if(navigator.userAgent.indexOf("Firefox")>0){
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }
    }else{
        document.onmousewheel = scrollFunc;
    }
});

      终于得到简介的代码了，不得不说，通过解决这个问题，还是学到很多的。以后要向着“write less, do more”的目标更加努力了！！！

      如果有哪里写的不对的，欢迎各位大神们指教，我会虚心学习的。

 



 

posted @ 2014-10-17 16:07  前端小菜鸟~  阅读(1527)  评论(0)  编辑  收藏  举报