Wie kann ich die Scrollrichtung in JavaScript bestimmen, ohne jQuery zu verwenden?

Bestimmen der Scroll-Richtung ohne jQuery

Erkennen der Scroll-Richtung

Das Bestimmen der Richtung eines Scroll-Ereignisses kann erreicht werden, ohne auf jQuery angewiesen zu sein. Hier ist eine JavaScript-Implementierung:

<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>

In diesem Code:

• lastScrollTop speichert die vorherige Scroll-Position.
• Der Scroll-Ereignis-Listener verfolgt die aktuelle Scroll-Position in st.
• Durch den Vergleich von st mit lastScrollTop können Sie die Scrollrichtung bestimmen.
• Die if-Anweisung wird beim Scrollen nach unten ausgeführt, während die else if-Anweisung beim Scrollen nach oben ausgeführt wird.
• Das lastScrollTop wird auf die aktuelle Scroll-Position aktualisiert, um sich auf das nächste Scroll-Ereignis vorzubereiten.

Vermeiden der Schaltfläche „Zurück zum Anfang“

Anstatt ein „Zurück zum Anfang“ hinzuzufügen Mit der Schaltfläche können Sie durch Erkennen der Bildlaufrichtung einen reibungsloseren Ansatz integrieren. Sie könnten zum Beispiel:

• Eine schwebende Navigationsleiste anzeigen, die beim Scrollen nach unten sichtbar wird und beim Scrollen nach oben ausgeblendet wird.
• Verwenden Sie CSS-Animationen, um Elemente so anzuzeigen oder auszublenden, wie die Seite ist gescrollt.
• Passen Sie die Deckkraft der Elemente auf der Seite basierend auf der Scrollrichtung an und erzeugen Sie so einen Parallaxeneffekt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Scrollrichtung in JavaScript bestimmen, ohne jQuery zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!