Wie können Sie die Scrollrichtung in JavaScript ohne jQuery bestimmen?

Bildlaufrichtung ohne jQuery erkennen

In der Webentwicklung kann das Erkennen der Bildlaufrichtung nützlich sein, um Funktionen wie unendliches Scrollen oder Reduzieren zu implementieren Symbolleisten. Während Bibliotheken wie jQuery einfache Lösungen bieten, wollen wir untersuchen, wie dies ohne ihre Verwendung erreicht werden kann.

Um die Scroll-Richtung zu bestimmen, können wir die vorherige Scroll-Position (scrollTop oder pageYOffset) verfolgen und sie mit dem aktuellen Scrollen vergleichen Position. Dieser Unterschied gibt an, ob wir nach oben oder unten scrollen.

Hier ist ein JavaScript-Ausschnitt, der diesen Ansatz demonstriert:

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

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop) {
      // downscroll code
   } else if (st < lastScrollTop) {
      // upscroll code
   } // else was horizontal scroll
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

In diesem Code prüfen wir, ob die aktuelle Scrollposition größer als ist oder kleiner als die vorherige Bildlaufposition. Ist der Wert größer, scrollen wir nach unten, ist er kleiner, scrollen wir nach oben. Horizontales Scrollen wird auch dadurch berücksichtigt, dass überprüft wird, ob die Scroll-Position unverändert ist.

Durch das Speichern der vorherigen Scroll-Position und den Vergleich mit der aktuellen Position können wir die Scroll-Richtung effektiv erkennen, ohne dass externe Bibliotheken erforderlich sind. Diese Methode kann auf verschiedene Elemente angewendet werden, einschließlich des Fensterobjekts zur globalen Bildlauferkennung.

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