Maison > interface Web > js tutoriel > 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
Libérer: 2024-10-27 09:10:30
original
677 Les gens l'ont consulté

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal