Scrollend, ein neues JavaScript-Ereignis

Löschen Sie Ihre Timeout-Funktionen und beheben Sie die Fehler. Das Ereignis, das Sie wirklich brauchen, ist „scrollend“.

Adam Argyle

Vor dem scrollend-Ereignis gab es keine zuverlässige Möglichkeit, festzustellen, ob ein Scrollvorgang abgeschlossen war. Das führte dazu, dass Ereignisse erst spät oder während der Finger des Nutzers noch auf dem Bildschirm war ausgelöst wurden. Diese Unzuverlässigkeit bei der Bestimmung des tatsächlichen Scrollendes führte zu Fehlern und einer schlechten Nutzererfahrung.

Vorher

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

Die setTimeout()-Strategie kann nur erkennen, ob der Scrollvorgang für 100ms beendet wurde. Das Ereignis ähnelt also eher einem pausierten Scrollen als einem beendeten Scrollen.

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

Nach

document.onscrollend = event => {…}

Das ist das Gute daran. Sie sind perfekt getaktet und enthalten viele wichtige Bedingungen, bevor sie ausgegeben werden.

Browser Support

• 114
• 114
• 109
• 

Source

Testen!

Veranstaltungsdetails

Das scrollend-Ereignis wird ausgelöst, wenn: - Der Browser keine Animationen oder Übersetzungen für das Scrollen mehr ausführt. – Die Berührung des Nutzers wurde beendet. – Der Mauszeiger des Nutzers hat den Scroll-Thumb losgelassen. – Die Taste des Nutzers wurde losgelassen. – Das Scrollen zum Fragment ist abgeschlossen. – Scroll-Snapping ist abgeschlossen. – scrollTo() ist abgeschlossen. – Der Nutzer hat den visuellen Darstellungsbereich gescrollt.

Das scrollend-Ereignis wird nicht ausgelöst, wenn: - Die Geste eines Nutzers nicht zu Änderungen der Scrollposition geführt hat (keine Übersetzung). – Für scrollTo() wurde keine Übersetzung erstellt.

Ein Grund dafür, dass es so lange gedauert hat, bis dieses Ereignis auf der Webplattform verfügbar war, sind die vielen kleinen Details, für die Spezifikationen erforderlich waren. Einer der komplexesten Bereiche war die Darstellung der scrollend-Details für den visuellen Viewport im Vergleich zum Dokument. Stellen Sie sich eine Webseite vor, auf die Sie zoomen. In diesem gezoomten Zustand können Sie scrollen, ohne dass das Dokument gescrollt wird. Auch bei dieser vom Nutzer ausgelösten Scrollinteraktion im visuellen Viewport wird das scrollend-Ereignis nach Abschluss ausgegeben.

Ereignis verwenden

Wie bei anderen Scroll-Ereignissen können Sie Listener auf verschiedene Arten 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 Enhancement

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 das Ende des Scrollvorgangs (falls vorhanden) weiterhin verwenden und zu Beginn die Unterstützung mit folgendem Code prüfen:

'onscrollend' in window
// true, if available

Je nachdem, ob der Browser das Ereignis unterstützt, wird „true“ oder „false“ zurückgegeben. 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-Event nach und nach zu optimieren, sobald es verfügbar ist. Sie können auch ein Polyfill (NPM) ausprobieren, das ich erstellt habe und das das Beste aus dem Browser herausholt:

import {scrollend} from "scrollyfills"

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

Das Polyfill wird schrittweise erweitert, um das integrierte scrollend-Ereignis des Browsers zu verwenden, sofern verfügbar. Wenn sie nicht verfügbar ist, werden Zeigerereignisse und Scrollvorgänge vom Skript überwacht, um das Ende des Ereignisses bestmöglich zu schätzen.

Anwendungsfälle

Es empfiehlt sich, rechenintensive Aufgaben zu vermeiden, während gescrollt wird. So kann das Scrollen so viel Arbeitsspeicher und Rechenleistung nutzen, wie nötig ist, um ein flüssiges Nutzererlebnis zu gewährleisten. Ein scrollend-Ereignis ist der perfekte Zeitpunkt, um die anspruchsvollen 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 der Scrollvorgang beendet wurde. Beispiel: - Die Scrollposition eines Karussells mit einer Punktanzeige synchronisieren. – Synchronisieren eines Galerieelements mit seinen Metadaten. – Daten werden abgerufen, nachdem ein Nutzer zu einem neuen Tab scrollt.

Stellen Sie sich vor, ein Nutzer wischt eine E‑Mail weg. Nachdem der Nutzer mit dem Wischen fertig ist, können Sie die Aktion basierend darauf ausführen, wohin er gescrollt hat.

Sie können dieses Ereignis auch für die Synchronisierung nach einem programmatischen oder Nutzer-Scroll oder für Aktionen wie das Logging von Analysen verwenden.

Hier ist ein gutes Beispiel dafür, wie mehrere Elemente wie Pfeile, Punkte und Fokus basierend auf der Scrollposition aktualisiert werden müssen. Auf YouTube ansehen Hier können Sie die Live-Demo ausprobieren.

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