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”的目标更加努力了！！！
如果有哪里写的不对的，欢迎各位大神们指教，我会虚心学习的。