萬盛學電腦網 >> 腳本專題 >> javascript >> js onmousewheel事件多次觸發問題解決方法
js onmousewheel事件多次觸發問題解決方法
我想做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果，遇到了很多問題，後來在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; });javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved