Comment puis-je déterminer la direction de défilement en JavaScript sans utiliser jQuery ?

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

Détection de la direction de défilement

La détermination de la direction d'un événement de défilement peut être réalisée sans compter sur jQuery. Voici une implémentation JavaScript :

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

// Adjust the element selector based on the target of your scroll event.
document.querySelector('body').addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
      // Downscroll code
   } else if (st < lastScrollTop) {
      // Upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // Account for negative scrolling or devices with touch events
}, false);</code>

Dans ce code :

• lastScrollTop stocke la position de défilement précédente.
• L'écouteur d'événement de défilement suit la position de défilement actuelle dans st.
• En comparant st avec lastScrollTop, vous pouvez déterminer la direction de défilement.
• L'instruction if s'exécute lors du défilement vers le bas, tandis que l'instruction else if s'exécute lors du défilement vers le haut.
• Le lastScrollTop est mis à jour à la position de défilement actuelle pour préparer le prochain événement de défilement.

Éviter le bouton "Retour en haut"

Au lieu d'ajouter un "Retour en haut" bouton, vous pouvez intégrer une approche plus fluide en détectant la direction de défilement. Par exemple, vous pouvez :

• Afficher une barre de navigation flottante qui devient visible lors du défilement vers le bas et se cache lors du défilement vers le haut.
• Utilisez des animations CSS pour révéler ou estomper des éléments au fur et à mesure que la page est affichée. défilé.
• Ajustez l'opacité des éléments sur la page en fonction de la direction de défilement, créant un effet de parallaxe.

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!