Maison > Article > interface Web > js événement onmousewheel déclenché plusieurs fois problème solution_javascript compétences

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

WBOYoriginal: 2016-05-16 16:33:241342parcourir

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>

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

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

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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Premiers pas avec la méthode JavaScript sup (affichage des chaînes en exposant)_Connaissances de baseArticle suivant：Premiers pas avec la méthode JavaScript sup (affichage des chaînes en exposant)_Connaissances de base

Articles Liés

Voir plus