js événement onmousewheel déclenché plusieurs fois problème solution_javascript compétences-js tutoriel-php.cn

js événement onmousewheel déclenché plusieurs fois problème solution_javascript compétences

WBOY

Libérer： 2016-05-16 16:33:24

original

1336 Les gens l'ont consulté

Je voulais créer un effet de commutation fluide en faisant rouler la molette de la souris entre le premier écran et le deuxième écran. Plus tard, avec l'aide de kk, j'ai finalement résolu le problème. Je l'ai enregistré. Un clic :

Mon code initial ressemblait à ceci :

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

Copier après la connexion

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

Copier après la connexion

J'ai testé ce code normalement sous IE et Firefox, mais sous Google, l'événement onmousewheel se déclenche toujours plusieurs fois. C'est une chose extrêmement ennuyeuse. Pourquoi se déclenche-t-il plusieurs fois ? Après le débogage, j'ai constaté que chaque fois que nous faisons défiler la souris, nous faisons défiler très "brutalement" une grande quantité à la fois, au lieu de faire défiler lentement par petits carrés, ce qui conduit à plusieurs fois lors du défilement, à déclencher l'événement onmousewheel et à appeler scrollFunc. fonction Lorsque la fonction d'animation dans la fonction n'a pas été exécutée, elle est toujours appelée en continu. De cette façon, il y aura une situation où la barre de défilement ne pourra pas défiler vers le bas après avoir défilé plusieurs fois et la page ne pourra pas défiler vers le haut. J'ai donc changé le code js ci-dessus comme suit :

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

Copier après la connexion

D'accord, maintenant le code peut s'exécuter normalement, mais comme je suis un débutant, le code n'est pas assez affiné, et kk l'a répété sous ses invites, j'ai mis à jour le code redondant :

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

Copier après la connexion

J'ai enfin reçu le code pour l'introduction. Je dois dire que j'ai beaucoup appris en résolvant ce problème. Je travaillerai plus dur pour atteindre l’objectif « écrire moins, faire plus » à l’avenir ! ! !

S'il y a quelque chose qui ne va pas dans ce que j'ai écrit, n'hésitez pas à me donner quelques conseils, j'en tirerai des leçons avec un esprit ouvert.