Maison > Article > interface Web > Comment détecter la direction de défilement en JavaScript sans jQuery ?
Détection de la direction de défilement sans jQuery
Déterminer la direction d'un défilement est crucial pour améliorer l'expérience utilisateur. Bien que jQuery simplifie cette tâche, il est possible d'obtenir des fonctionnalités similaires en utilisant JavaScript Vanilla.
Comprendre le problème
Le code fourni tente de détecter la direction de défilement en comparant le scrollTop actuel valeur à zéro. Cependant, cette approche est imparfaite car elle suppose que le défilement part toujours de zéro. En réalité, la position de défilement peut être n'importe quelle valeur.
Détection manuelle de la direction de défilement
La clé pour détecter la direction de défilement consiste à stocker la valeur scrollTop précédente et à la comparer à la valeur actuelle. Lorsque la valeur actuelle est supérieure à la valeur précédente, le défilement se déplace vers le bas. À l'inverse, si la valeur actuelle est inférieure à la valeur précédente, le défilement monte.
Implémentation
L'extrait de code JavaScript suivant montre comment détecter la direction de défilement :
<code class="javascript">var lastScrollTop = 0; // Add event listener to the target element element.addEventListener("scroll", function () { // Get the current scroll position var st = window.pageYOffset || document.documentElement.scrollTop; // Compare the current and previous scroll positions if (st > lastScrollTop) { // Downscroll code } else if (st < lastScrollTop) { // Upscroll code } else { // Horizontal scroll } // Update the lastScrollTop value lastScrollTop = st <= 0 ? 0 : st; }, false);</code>
Assurer la compatibilité
Ce code devrait fonctionner dans la plupart des navigateurs modernes. Cependant, pour des raisons de compatibilité ascendante, il est recommandé d'utiliser la propriété window.pageYOffset ou document.documentElement.scrollTop pour obtenir la position de défilement. De plus, la variable lastScrollTop doit être initialisée à zéro pour gérer le défilement négatif ou le défilement sur les appareils mobiles.
Conclusion
En utilisant l'approche décrite dans cet article, vous pouvez détecter efficacement la direction de défilement à l’aide de JavaScript Vanilla. Cette technique est particulièrement utile pour implémenter des fonctionnalités telles que le chargement paresseux, le défilement infini et le défilement fluide.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!