Maison  >  Article  >  interface Web  >  Voici quelques options de titre, en se concentrant sur l'aspect « comment faire » de votre article : * Comment détecter la direction de défilement en JavaScript sans jQuery * Détection de la direction de défilement JavaScript : un Sim

Voici quelques options de titre, en se concentrant sur l'aspect « comment faire » de votre article : * Comment détecter la direction de défilement en JavaScript sans jQuery * Détection de la direction de défilement JavaScript : un Sim

DDD
DDDoriginal
2024-10-27 09:10:30577parcourir

Here are a few title options, focusing on the

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

Lorsque vous utilisez JavaScript pour exécuter une fonction lors du défilement, il peut être avantageux de connaître la direction du défilement . Sans jQuery, cela peut être réalisé en implémentant une solution qui stocke et compare les valeurs scrollTop précédentes.

Solution

Le code JavaScript suivant détecte efficacement la direction de défilement :

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

// Customize this to target the desired element for scroll detection.
document.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop) {
    // Code to execute when scrolling down
  } else if (st < lastScrollTop) {
    // Code to execute when scrolling up
  }
  // Reset the lastScrollTop value to prevent false negatives on mobile devices.
  lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>

Cette solution fournit un moyen de détecter la direction de défilement sans utiliser jQuery. En stockant et en comparant les valeurs scrollTop, il identifie efficacement les actions de défilement vers le bas et vers le haut.

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!

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