Comment pouvez-vous déterminer la direction de défilement en JavaScript sans jQuery ?

Détection de la direction de défilement sans jQuery

Dans le développement Web, la détection de la direction d'un défilement peut être utile pour implémenter des fonctionnalités telles que le défilement ou la réduction infinie barres d'outils. Bien que des bibliothèques comme jQuery offrent des solutions simples, explorons comment cela peut être réalisé sans leur utilisation.

Pour déterminer la direction de défilement, nous pouvons suivre la position de défilement précédente (scrollTop ou pageYOffset) et la comparer avec la position de défilement actuelle. position. Cette différence signifie si nous faisons défiler vers le haut ou vers le bas.

Voici un extrait de JavaScript qui illustre cette approche :

<code class="javascript">var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop) {
      // downscroll code
   } else if (st < lastScrollTop) {
      // upscroll code
   } // else was horizontal scroll
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

Dans ce code, nous vérifions si la position de défilement actuelle est supérieure à ou inférieure à la position de défilement précédente. Si c'est plus grand, nous faisons défiler vers le bas, et si c'est moins, nous faisons défiler vers le haut. Le défilement horizontal est également pris en compte en vérifiant si la position de défilement est inchangée.

En stockant la position de défilement précédente et en la comparant avec la position actuelle, nous pouvons détecter efficacement la direction de défilement sans avoir besoin de bibliothèques externes. Cette méthode peut être appliquée à divers éléments, y compris l'objet window pour la détection globale du défilement.

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!