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!