js onmousewheel事件多次触发问题解决方法
我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下:
我最初的代码是这样的:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <style> div{ width:700px; height:1000px; } .red{ background-color:red; } .yellow{ background-color:yellow; } </style> </head> <body> <divclass="red"></div> <divclass="yellow"></div> <divclass="red"></div> <divclass="yellow"></div> <divclass="red"></div> </body> <scriptsrc="../jQuery/jquery.min.js"></script> <scriptsrc="test.js"></script> </html>
$(document).ready(function(){ varheight=$(window).height();//获取浏览器窗口当前可见区域的大小 //鼠标滚动之后整屏切换 varscrollFunc=function(e){ varscrollTop=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"); }elseif((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(){ varheight=$(window).height(); varscrollFunc=function(e){ document.onmousewheel=undefined; varscrollTop=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; }); }elseif((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(){ varheight=$(window).height(); varwidth=$(window).width(); varbody; if(navigator.userAgent.indexOf("Firefox")>0||navigator.userAgent.indexOf("MSIE")>0){ body=document.documentElement; }else{ body=document.body; } varisFinish=true; varscrollFunc=function(e){ if(isFinish){ varscrollTop=body.scrollTop; e=e||window.event; if((e.wheelDelta<0||e.detail>0)&&scrollTop>=0&&scrollTop<height-20){ scroll(height); }elseif((e.wheelDelta>0||e.detail<0)&&scrollTop>=height&&scrollTop<=height+20){ scroll(0); } } }; varscroll=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; } });
终于得到简介的代码了,不得不说,通过解决这个问题,还是学到很多的。以后要向着“writeless,domore”的目标更加努力了!!!
如果有哪里写的不对的,欢迎各位大神们指教,我会虚心学习的。