interface Web
js tutoriel
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
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
![ID d'événement 4660 : objet supprimé [Correctif]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
ID d'événement 4660 : objet supprimé [Correctif]
Jul 03, 2023 am 08:13 AM
Certains de nos lecteurs ont rencontré l'événement ID4660. Ils ne savent souvent pas quoi faire, c'est pourquoi nous l'expliquons dans ce guide. L'ID d'événement 4660 est souvent enregistré lorsque des objets sont supprimés. Nous explorerons donc également quelques moyens pratiques de le corriger sur votre ordinateur. Qu'est-ce que l'événement ID4660 ? L'ID d'événement 4660 est lié aux objets dans Active Directory et sera déclenché par l'un des facteurs suivants : Suppression d'objet – Un événement de sécurité avec l'ID d'événement 4660 est enregistré chaque fois qu'un objet est supprimé d'Active Directory. Modifications manuelles – L'ID d'événement 4660 peut être généré lorsqu'un utilisateur ou un administrateur modifie manuellement les autorisations d'un objet. Cela peut se produire lors de la modification des paramètres d'autorisation, de la modification des niveaux d'accès ou de l'ajout ou de la suppression de personnes ou de groupes.
Recevez les événements du calendrier à venir sur l'écran de verrouillage de votre iPhone
Dec 01, 2023 pm 02:21 PM
Sur les iPhones exécutant iOS 16 ou version ultérieure, vous pouvez afficher les événements du calendrier à venir directement sur l'écran de verrouillage. Lisez la suite pour savoir comment procéder. Grâce aux complications du cadran, de nombreux utilisateurs d'Apple Watch sont habitués à pouvoir jeter un coup d'œil à leur poignet pour voir le prochain événement du calendrier à venir. Avec l'avènement d'iOS16 et des widgets d'écran de verrouillage, vous pouvez afficher les mêmes informations sur les événements du calendrier directement sur votre iPhone sans même déverrouiller l'appareil. Le widget Calendar Lock Screen est disponible en deux versions, vous permettant de suivre l'heure du prochain événement à venir ou d'utiliser un widget plus grand qui affiche les noms des événements et leurs heures. Pour commencer à ajouter des widgets, déverrouillez votre iPhone à l'aide de Face ID ou Touch ID, appuyez et maintenez
En JavaScript, quel est le but de l'événement « oninput » ?
Aug 26, 2023 pm 03:17 PM
Lorsqu'une valeur est ajoutée à la zone de saisie, l'événement oninput se produit. Vous pouvez essayer d'exécuter le code suivant pour comprendre comment implémenter les événements oninput en JavaScript - Exemple<!DOCTYPEhtml><html> <body> <p>Écrivez ci-dessous :</p> <inputtype="text"
Comment implémenter des fonctions de calendrier et des rappels d'événements dans les projets PHP ?
Nov 02, 2023 pm 12:48 PM
Comment implémenter des fonctions de calendrier et des rappels d'événements dans les projets PHP ? La fonctionnalité de calendrier et les rappels d'événements sont l'une des exigences courantes lors du développement d'applications Web. Qu'il s'agisse de gestion d'agenda personnel, de collaboration en équipe ou de planification d'événements en ligne, la fonction de calendrier peut fournir une gestion pratique du temps et l'organisation des transactions. L'implémentation de fonctions de calendrier et de rappels d'événements dans les projets PHP peut être réalisée en suivant les étapes suivantes. Conception de la base de données Tout d'abord, vous devez concevoir une table de base de données pour stocker les informations sur les événements du calendrier. Une conception simple peut contenir les champs suivants : id : unique à l'événement
Comment implémenter la liaison d'événement de changement d'éléments sélectionnés dans jQuery
Feb 23, 2024 pm 01:12 PM
jQuery est une bibliothèque JavaScript populaire qui peut être utilisée pour simplifier la manipulation du DOM, la gestion des événements, les effets d'animation, etc. Dans le développement Web, nous rencontrons souvent des situations dans lesquelles nous devons modifier la liaison d'événements sur des éléments sélectionnés. Cet article explique comment utiliser jQuery pour lier des événements de modification d'éléments sélectionnés et fournit des exemples de code spécifiques. Tout d'abord, nous devons créer un menu déroulant avec des options utilisant des étiquettes :
Quels sont les événements couramment utilisés dans jquery
Jan 03, 2023 pm 06:13 PM
Les événements couramment utilisés dans jquery sont : 1. Les événements de fenêtre ; 2. Les événements de souris, qui sont des événements générés lorsque l'utilisateur déplace ou clique avec la souris sur le document, y compris les clics de souris, les événements d'entrée, les événements de sortie, etc. ; 3. Événements de clavier. Les événements sont générés chaque fois que l'utilisateur appuie ou relâche une touche du clavier, y compris les événements de pression sur une touche, les événements de relâchement de touche, etc. 4. Les événements de formulaire, par exemple lorsqu'un élément obtient le focus, le focus() ; L'événement sera déclenché, et lorsqu'il perd le focus, l'événement Blur() est déclenché et l'événement submit() est déclenché lorsque le formulaire est soumis.
Explication détaillée des événements de liaison de zone de saisie dans les documents Vue
Jun 21, 2023 am 08:12 AM
Vue.js est un framework JavaScript léger, facile à utiliser, efficace et flexible. Il s'agit actuellement de l'un des frameworks front-end les plus populaires. Dans Vue.js, les événements de liaison de zone de saisie sont une exigence très courante. Cet article présentera en détail les événements de liaison de zone de saisie dans le document Vue. 1. Concepts de base Dans Vue.js, l'événement de liaison de la zone de saisie fait référence à la liaison de la valeur de la zone de saisie à l'objet de données de l'instance Vue, réalisant ainsi une liaison bidirectionnelle de l'entrée et de la réponse. Dans Vue.j
Comment créer des applications basées sur des événements en utilisant PHP
May 04, 2024 pm 02:24 PM
Les méthodes de création d'applications basées sur des événements en PHP incluent l'utilisation d'EventSourceAPI pour créer une source d'événements et l'utilisation de l'objet EventSource pour écouter les événements côté client. Envoyez des événements à l'aide de Server Sent Events (SSE) et écoutez les événements côté client à l'aide d'un objet XMLHttpRequest. Un exemple pratique consiste à utiliser EventSource pour mettre à jour les inventaires en temps réel sur un site Web de commerce électronique. Ceci est réalisé côté serveur en modifiant l'inventaire de manière aléatoire et en envoyant des mises à jour, et le client écoute les mises à jour d'inventaire via EventSource et les affiche dans. temps réel.
