|
|
我想做一個(gè)首屏和第二屏之間滾動(dòng)鼠標(biāo)滾輪就可以整平切換的效果，遇到了很多問題，后來在kk的幫助下，終于解決了這個(gè)問題，甚是歡喜，于是記錄一下：
我最初的代碼是這樣的：
<!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>$(document).ready(function(){var height = $(window).height(); //獲取瀏覽器窗口當(dāng)前可見區(qū)域的大小 //鼠標(biāo)滾動(dòng)之后整屏切換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){ //不同瀏覽器向下滾動(dòng) $(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){ //不同瀏覽器向上滾動(dòng)$(document.body).animate({scrollTop:0}, "fast");$(document.documentElement).animate({scrollTop:0}, "fast");}}; //注冊(cè)事件if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);}window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira});這樣的代碼我在IE和火狐下測(cè)試都是正常的，但是在谷歌下onmousewheel事件總是會(huì)觸發(fā)多次，這是一個(gè)極其惱人的事情，為什么會(huì)多次觸發(fā)呢？經(jīng)過調(diào)試，我發(fā)現(xiàn)是我們每次滾動(dòng)鼠標(biāo)時(shí)都是很“兇殘”的一下子滾動(dòng)很大一個(gè)幅度，而不是一小格一小格的慢慢滾動(dòng)，這就導(dǎo)致了滾動(dòng)的時(shí)候會(huì)多次觸發(fā)onmousewheel事件，調(diào)用scrollFunc函數(shù)，在函數(shù)內(nèi)的animate函數(shù)沒有執(zhí)行完的時(shí)候還是不斷的被調(diào)用，這樣就會(huì)出現(xiàn)滾動(dòng)多次滾動(dòng)條滾不下來頁(yè)滾不上去的情況。于是，我將上面的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;});好了，現(xiàn)在的代碼已經(jīng)能夠正常運(yùn)行了，不過由于我是一只菜鳥，代碼寫的不夠精致，又被kk說了，在他的提示下，我將冗余的代碼又進(jìn)行了一番修改：
$(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;}});終于得到簡(jiǎn)介的代碼了，不得不說，通過解決這個(gè)問題，還是學(xué)到很多的。以后要向著“write less, do more”的目標(biāo)更加努力了！！！
如果有哪里寫的不對(duì)的，歡迎各位大神們指教，我會(huì)虛心學(xué)習(xí)的。
JavaScript技術(shù)：js onmousewheel事件多次觸發(fā)問題解決方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
