js onmousewheel事件多次觸發問題解決方法

2024-05-06 16:09:53

字體：大中小

來源：轉載

供稿：網友

做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果，遇到了很多問題，下面是問題解決方法

我想做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果，遇到了很多問題，后來在kk的幫助下，終于解決了這個問題，甚是歡喜，于是記錄一下：

我最初的代碼是這樣的：

<!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(); //獲取瀏覽器窗口當前可見區域的大小

　　　　//鼠標滾動之后整屏切換

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代碼改成了下面這樣：

$(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;

}

});