Scrollend, ein neues JavaScript-Ereignis

Löschen Sie Ihre Timeout-Funktionen und schütteln Sie die Fehler aus. Hier ist das Ereignis, das Sie wirklich brauchen: scrollen.

Adam Argyle

Twitter GitHub

Vor dem scrollend-Ereignis gab es keine zuverlässige Möglichkeit zu erkennen, ob ein Scrollen abgeschlossen wurde. Dies bedeutete, dass Ereignisse spät ausgelöst wurden oder solange der Finger des Nutzers noch auf dem Bildschirm lag. Dadurch konnte nicht erkannt werden, wann das Scrollen tatsächlich beendet wurde, was zu Fehlern und einer schlechten Nutzererfahrung führte.

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

Mit dieser setTimeout()-Strategie lässt sich am besten feststellen, ob das Scrollen bei 100ms gestoppt wurde. Es ähnelt also eher der Tatsache, dass ein Scroll-Ereignis pausiert wurde und nicht das Scroll-Ereignis beendet wurde.

Nach dem scrollend-Ereignis nimmt der Browser die schwierige Auswertung für Sie vor.

document.onscrollend = event => {…}

Das ist die gute Sache. Perfekt abgestimmt und voller sinnvoller Bedingungen vor der Ausgabe.

Testen!

Veranstaltungsdetails

Das scrollend-Ereignis wird in folgenden Fällen ausgelöst: – Das Scrollen im Browser wird nicht mehr animiert oder übersetzt. - Die Berührung des Nutzers wurde freigegeben. - Der Mauszeiger des Nutzers hat den Scroll-Daumen losgelöst. - Die Tastendruck des Nutzers wurde freigegeben. – Das Scrollen zum Fragment ist abgeschlossen. – Das Scrollen ist abgeschlossen. - scrollTo() ist abgeschlossen. – Der Nutzer ist im visuellen Darstellungsbereich gescrollt.

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

Ein Grund dafür, dass dieses Ereignis so lange gedauert hat, bis es auf der Webplattform zu finden war, waren die vielen kleinen Details, für die Spezifikationsdetails erforderlich waren. Einer der komplexesten Bereiche war die Formulierung der scrollend-Details für den Visual Viewport gegenüber dem Dokument. Nehmen Sie eine Webseite, die Sie heranzoomen. In diesem Zoomstatus können Sie umherscrollen, ohne dass dabei das Dokument gescrollt wird. Selbst diese nutzergesteuerte Scroll-Interaktion für den visuellen Darstellungsbereich gibt nach Abschluss des Vorgangs das scrollend-Ereignis aus.

Ereignis verwenden

Wie bei anderen Scroll-Ereignissen haben Sie auch hier mehrere Möglichkeiten, Listener zu registrieren.

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

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

Oder verwenden Sie die Ereigniseigenschaft:

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

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

Polyfills und Progressive Enhancement

Wenn du dieses neue Ereignis jetzt nutzen möchtest, haben wir hier die besten Tipps für dich. Sie können Ihre aktuelle Scroll-End-Strategie weiter verwenden (sofern vorhanden) und zu Beginn die Unterstützung folgendermaßen prüfen:

'onscrollend' in window
// true, if available

Es wird „true“ oder „false“ ausgegeben, 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 für die schrittweise Optimierung Ihres scrollend-Ereignisses, falls es verfügbar ist. Sie können auch ein von mir erstelltes polyfill (NPM) ausprobieren, das das Beste bietet, was der Browser kann:

import {scrollend} from "scrollyfills"

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

Das Polyfill-Element wird nach und nach optimiert, um das integrierte Browserereignis scrollend zu verwenden, falls verfügbar. Wenn sie nicht verfügbar ist, beobachtet das Skript Zeigerereignisse und scrollt, um das Ereignisende bestmöglich zu schätzen.

Anwendungsfälle

Es empfiehlt sich, beim Scrollen rechenintensive Arbeiten zu vermeiden. Dadurch wird sichergestellt, dass das Scrollen so kostenlos ist, dass so viel Arbeitsspeicher und Verarbeitung wie möglich genutzt wird, um für eine reibungslose Nutzung zu sorgen. Ein scrollend-Ereignis bietet den perfekten Zeitpunkt, um auf die harte Arbeit hinzuweisen, da kein Scrollen mehr erfolgt.

Mit dem Ereignis scrollend können verschiedene Aktionen ausgelöst werden. Ein häufiger Anwendungsfall ist das Synchronisieren zugehöriger UI-Elemente mit der Position, die das Scrollen beendet hat. Beispiel: – Scrollposition eines Karussells mit Punktanzeige synchronisieren – Synchronisieren eines Galerieelements mit seinen Metadaten – Daten abrufen, nachdem der Nutzer zu einem neuen Tab gescrollt hat

Stellen Sie sich ein Szenario vor, in dem Nutzende eine E-Mail wegwischen. Nachdem sie mit dem Wischen fertig sind, können Sie die Aktion je nachdem, wohin sie gescrollt haben, ausführen.

Sie können dieses Ereignis auch für die Synchronisierung nach dem programmatischen oder Nutzerscrollen oder für Aktionen wie Logging-Analysen verwenden.

Hier siehst du ein gutes Beispiel, bei dem mehrere Elemente wie Pfeile, Punkte und Fokus je nach Scrollposition aktualisiert werden müssen. Sieh dir an, wie ich dieses Karussell auf YouTube erstellt habe. Sehen Sie sich auch die Live-Demo an.

Vielen Dank an Mehdi Kazemi für die Entwicklungsarbeit an diesem Projekt und an Robert Flack für den API- und Implementierungsleitfaden.