Scrollend, ein neues JavaScript-Ereignis

Löschen Sie Ihre Zeitüberschreitungsfunktionen und beseitigen Sie die Fehler. Hier ist das Ereignis, das Sie wirklich benötigen: scrollend.

Adam Argyle

Vor dem Ereignis scrollend gab es keine zuverlässige Möglichkeit, zu erkennen, dass ein Scrollen abgeschlossen ist. Das bedeutete, dass Ereignisse zu spät oder während der Finger des Nutzers noch auf dem Bildschirm war, ausgelöst wurden. Diese Unzuverlässigkeit bei der Erkennung des tatsächlichen Endes des Scrollens führte zu Fehlern und einer schlechten Nutzererfahrung.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Mit dieser setTimeout()-Strategie lässt sich nur feststellen, ob das Scrollen für 100ms beendet wurde. Das Ereignis ähnelt eher dem Ereignis „scroll has paused“ (Scrollen wurde pausiert) als dem Ereignis „scroll has ended“ (Scrollen wurde beendet).

Nach dem Ereignis scrollend übernimmt der Browser die gesamte komplexe Bewertung für Sie.

document.onscrollend = event => {…}

Das ist gut. Sie sind perfekt getaktet und enthalten vor dem Senden eine Reihe relevanter Bedingungen.

Testen!

Veranstaltungsdetails

Das Ereignis scrollend wird ausgelöst, wenn: - Der Browser das Scrollen nicht mehr animiert oder übersetzt. – Der Nutzer hat den Touchscreen losgelassen. – Der Cursor des Nutzers hat den Schieberegler losgelassen. – Die Tastenaktivierung des Nutzers wurde aufgehoben. – Das Scrollen zum Textfragment ist abgeschlossen. – Das Scroll-Snapping ist abgeschlossen. – scrollTo() ist abgeschlossen. – Der Nutzer hat im visuellen Darstellungsbereich gescrollt.

Das Ereignis scrollend wird in folgenden Fällen nicht ausgelöst: - Die Geste eines Nutzers hat zu keiner Änderung der Scrollposition geführt (keine Verschiebung). – scrollTo() hat keine Übersetzung ergeben.

Ein Grund dafür, dass es so lange gedauert hat, bis dieses Ereignis auf der Webplattform verfügbar war, waren die vielen kleinen Details, die spezifiziert werden mussten. Eine der komplexesten Aufgaben bestand darin, die scrollend-Details für den visuellen Viewport im Vergleich zum Dokument zu formulieren. Stellen Sie sich eine Webseite vor, auf die Sie heranzoomen. In diesem Zustand können Sie scrollen, ohne dass sich das Dokument unbedingt scrollt. Auch bei dieser vom Nutzer initiierten Scroll-Interaktion im visuellen Viewport wird das scrollend-Ereignis ausgelöst, sobald sie abgeschlossen ist.

Ereignis verwenden

Wie bei anderen Scroll-Ereignissen können Sie Listener auf unterschiedliche Weise registrieren.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

Alternativ können Sie die Ereignis-Property verwenden:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfills und progressive Verbesserung

Wenn Sie dieses neue Ereignis jetzt verwenden möchten, haben wir hier einige Tipps für Sie. Sie können Ihre aktuelle Strategie für den Scrollende (falls vorhanden) weiter verwenden und am Anfang mit dem Support Folgendes prüfen:

'onscrollend' in window
// true, if available

Es wird „wahr“ oder „falsch“ zurückgegeben, je nachdem, ob der Browser das Ereignis anbietet. Mit dieser Prüfung können Sie den Code verzweigen:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

Das ist ein guter Anfang, um Ihr scrollend-Ereignis nach und nach zu optimieren, sobald es verfügbar ist. Du kannst auch eine von mir erstellte Polyfill-Funktion (NPM) ausprobieren, die das Beste aus dem Browser herausholt:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Die Polyfill wird nach und nach so erweitert, dass das im Browser integrierte scrollend-Ereignis verwendet wird, sofern verfügbar. Ist das nicht der Fall, überwacht das Script die Mauszeigerbewegungen und das Scrollen, um das Ereignisende so genau wie möglich zu bestimmen.

Anwendungsfälle

Es empfiehlt sich, während des Scrollens keine rechenintensiven Aufgaben auszuführen. So kann beim Scrollen so viel Arbeitsspeicher und Verarbeitung wie möglich genutzt werden, um die Leistung zu optimieren. Mit einem scrollend-Ereignis ist der perfekte Zeitpunkt gekommen, um die schweren Aufgaben zu erledigen, da nicht mehr gescrollt wird.

Mit dem Ereignis scrollend können verschiedene Aktionen ausgelöst werden. Ein häufiger Anwendungsfall ist die Synchronisierung zugehöriger UI-Elemente mit der Position, an der das Scrollen angehalten wurde. Beispiele: – Synchronisierung der Scrollposition eines Karussells mit einem Punktindikator. – Galerieelemente mit ihren Metadaten synchronisieren – Daten werden abgerufen, nachdem ein Nutzer zu einem neuen Tab gescrollt hat.

Stellen Sie sich ein Szenario vor, in dem ein Nutzer eine E-Mail wegwischt. Nachdem der Nutzer gewischt hat, können Sie die Aktion ausführen, die zu der Stelle gehört, zu der er gescrollt hat.

Sie können dieses Ereignis auch für die Synchronisierung nach dem Scrollen durch den Nutzer oder durch ein Programm oder für Aktionen wie das Logging von Analysen verwenden.

Hier ist ein gutes Beispiel, bei dem mehrere Elemente wie Pfeile, Punkte und Fokus je nach Scrollposition aktualisiert werden müssen. In diesem YouTube-Video zeige ich, wie ich dieses Karussell erstellt habe. Probieren Sie auch die Live-Demo aus.

Vielen Dank an Mehdi Kazemi für die technische Arbeit und an Robert Flack für die API- und Implementierungsanleitung.