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、safira18 });这样的代码我在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”的目标更加努力了！！！
如果有哪里写的不对的，欢迎各位大神们指教，我会虚心学习的。
新闻热点
疑难解答
