网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 js onmousewheel事件多次触发问题解决方法
范文
    我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，后来在kk的帮助下，终于解决了这个问题，甚是欢喜，于是记录一下：
    我最初的代码是这样的：
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style>
    div {
    width: 700px;
    height: 1000px;
    }
    .red {
    background-color: red;
    }
    .yellow {
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    </body>
    <script src="../jQuery/jquery.min.js"></script>
    <script src="test.js"></script>
    </html>
    $(document).ready(function(){
    var height = $(window).height(); //获取浏览器窗口当前可见区域的大小
    　//鼠标滚动之后整屏切换
    var scrollFunc = function(e){
    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");
    $(document.documentElement).animate({scrollTop:height}, "fast");
    }else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){ //不同浏览器向上滚动
    $(document.body).animate({scrollTop:0}, "fast");
    $(document.documentElement).animate({scrollTop:0}, "fast");
    }
    };
    　//注册事件
    if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }
    window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
    });
    这样的代码我在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”的目标更加努力了！！！
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 5:41:50