js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten-js-Tutorial-php.cn

js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:33:24

Original

1367 Leute haben es durchsucht

Ich wollte einen reibungslosen Wechseleffekt erzielen, indem ich das Mausrad zwischen dem ersten und dem zweiten Bildschirm drehte. Später war ich mit der Hilfe von kk sehr zufrieden Ich habe es aufgenommen. Ein Klick:

Mein ursprünglicher Code sah so aus:

<!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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Ich habe diesen Code normalerweise unter IE und Firefox getestet, aber unter Google wird das Onmousewheel-Ereignis immer mehrmals ausgelöst. Das ist äußerst ärgerlich. Warum wird es mehrmals ausgelöst? Nach dem Debuggen habe ich festgestellt, dass wir jedes Mal, wenn wir mit der Maus scrollen, sehr „brutal“ um einen großen Betrag auf einmal scrollen, anstatt langsam in kleinen Quadraten zu scrollen, was dazu führt, dass beim Scrollen das onmousewheel-Ereignis mehrmals ausgelöst und scrollFunc aufgerufen wird Wenn die Animationsfunktion in der Funktion nicht ausgeführt wurde, wird sie weiterhin aufgerufen. Auf diese Weise kann die Bildlaufleiste nach mehrmaligem Scrollen nicht nach unten gescrollt werden. Also habe ich den obigen js-Code wie folgt geändert:

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

Nach dem Login kopieren

Okay, jetzt kann der Code normal ausgeführt werden, aber da ich ein Neuling bin, ist der Code nicht ausreichend verfeinert, und kk hat es noch einmal gesagt. Auf seine Aufforderung hin habe ich den redundanten Code aktualisiert:

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

Nach dem Login kopieren

Ich habe endlich den Code für die Einführung bekommen. Ich muss sagen, dass ich durch die Lösung dieses Problems viel gelernt habe. Ich werde in Zukunft noch stärker auf das Ziel „Weniger schreiben, mehr tun“ hinarbeiten! ! !

Wenn an dem, was ich geschrieben habe, etwas nicht stimmt, können Sie mir gerne einen Rat geben, ich werde unvoreingenommen daraus lernen.