时间:2021-05-02
我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下:
我最初的代码是这样的:
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!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 class="red"> </div> <div class="yellow"> </div> <div class="red"> </div> <div class="yellow"> </div> <div class="red"> </div> </body> <script src="../jQuery/jquery.min.js"></script> <script src="test.js"></script> </html> ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(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代码改成了下面这样:
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 $(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说了,在他的提示下,我将冗余的代码又进行了一番修改:
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 $(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”的目标更加努力了!!!
如果有哪里写的不对的,欢迎各位大神们指教,我会虚心学习的。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
layer.confirm快速点击会重复触发事件问题1.问题描述:快速点击会出现,重复触发事件,像后台发起多次请求,此时后台极端=短时间内多次请求,会出现并发问
openoffice不能调用SCIM的问题解决方法$oowriterQUOTE:Gtk-Message:Failedtoloadmodule"gnomebrea
出现这个问题解决方法:点击File>Settings>Tools>ServerCertificates>Acceptnon-trustedcertificate
Mysqlmysqllostconnectiontoserverduringquery问题解决方法缘由:在查询Mysql中的数据库,或者修改比较大的表的时候就会
eWebEditor编辑器按钮失效,IE8下eWebEditor编辑器无法使用问题解决方法有两个,一个是下面的方法通过修改js文件,其实我们也可以使用第二种方法