Wie erkennt man die Scrollrichtung in JavaScript ohne jQuery?

Bildlaufrichtung ohne jQuery erkennen

Die Bestimmung der Bildlaufrichtung ist entscheidend für die Verbesserung der Benutzererfahrung. Während jQuery diese Aufgabe vereinfacht, ist es möglich, mit Vanilla-JavaScript eine ähnliche Funktionalität zu erreichen.

Verstehen des Problems

Der bereitgestellte Code versucht, die Scrollrichtung durch Vergleich des aktuellen scrollTop zu erkennen Wert auf Null. Dieser Ansatz ist jedoch fehlerhaft, da er davon ausgeht, dass der Bildlauf immer bei Null beginnt. In Wirklichkeit kann die Scroll-Position ein beliebiger Wert sein.

Scroll-Richtung manuell erkennen

Der Schlüssel zum Erkennen der Scroll-Richtung besteht darin, den vorherigen scrollTop-Wert zu speichern und ihn mit dem zu vergleichen aktueller Wert. Wenn der aktuelle Wert größer als der vorherige Wert ist, bewegt sich der Bildlauf nach unten. Wenn umgekehrt der aktuelle Wert kleiner als der vorherige Wert ist, bewegt sich der Bildlauf nach oben.

Implementierung

Der folgende JavaScript-Codeausschnitt zeigt, wie die Bildlaufrichtung erkannt wird:

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

// Add event listener to the target element
element.addEventListener("scroll", function () {
  // Get the current scroll position
  var st = window.pageYOffset || document.documentElement.scrollTop;

  // Compare the current and previous scroll positions
  if (st > lastScrollTop) {
    // Downscroll code
  } else if (st < lastScrollTop) {
    // Upscroll code
  } else {
    // Horizontal scroll
  }

  // Update the lastScrollTop value
  lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>

Kompatibilität sicherstellen

Dieser Code sollte in den meisten modernen Browsern funktionieren. Aus Gründen der Abwärtskompatibilität wird jedoch empfohlen, die Eigenschaft window.pageYOffset oder document.documentElement.scrollTop zu verwenden, um die Bildlaufposition zu ermitteln. Darüber hinaus sollte die Variable lastScrollTop auf Null initialisiert werden, um negatives Scrollen oder Scrollen auf Mobilgeräten zu verarbeiten.

Fazit

Durch die Verwendung des in diesem Artikel beschriebenen Ansatzes können Sie dies tun Erkennen Sie effektiv die Bildlaufrichtung mithilfe von Vanilla-JavaScript. Diese Technik ist besonders nützlich für die Implementierung von Funktionen wie Lazy Loading, Infinite Scrolling und Smooth Scrolling.

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