Scrollend, ein neues JavaScript-Ereignis

Löschen Sie Ihre Zeitlimitfunktionen und beheben Sie die Fehler. Hier ist das Ereignis, das Sie wirklich brauchen: scrollend.

Adam Argyle

Vor dem scrollend-Ereignis gab es keine zuverlässige Möglichkeit, das Ende eines Scrollvorgangs zu erkennen. Das führte dazu, dass Ereignisse zu spät oder während der Nutzer noch den Finger auf dem Bildschirm hatte, ausgelöst wurden. Diese Unzuverlässigkeit beim Erkennen, wann das Scrollen tatsächlich beendet ist, führte zu Fehlern und einer schlechten Nutzererfahrung.

Vorher

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

Das Beste, was diese setTimeout()-Strategie tun kann, ist zu wissen, ob das Scrollen für 100ms gestoppt wurde. Das entspricht eher einem Ereignis, bei dem das Scrollen pausiert wurde, als einem Ereignis, bei dem das Scrollen beendet wurde.

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

Nach

document.onscrollend = event => {…}

Das ist das Gute. Perfekt getimt und voller aussagekräftiger Bedingungen, bevor sie ausgegeben werden.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Testen!

Veranstaltungsdetails

Das Ereignis scrollend wird ausgelöst, wenn: – Der Browser das Scrollen nicht mehr animiert oder übersetzt. – Der Nutzer hat die Berührung beendet. – Der Nutzer hat den Scrollbalken losgelassen. – Der Nutzer hat die Taste losgelassen. - Scrollen zum Fragment ist abgeschlossen. - Scroll Snap 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 Übersetzung). - scrollTo() hat zu keiner Übersetzung geführt.

Ein Grund, warum es so lange gedauert hat, bis dieses Ereignis auf der Webplattform verfügbar war, waren die vielen kleinen Details, die spezifiziert werden mussten. Einer der komplexesten Bereiche war die Formulierung der scrollend-Details für den visuellen Darstellungsbereich im Vergleich zum Dokument. Stellen Sie sich eine Webseite vor, die Sie heranzoomen. In diesem vergrößerten Zustand können Sie scrollen, ohne dass das Dokument unbedingt gescrollt wird. Auch bei dieser visuellen, vom Nutzer gesteuerten Scroll-Interaktion wird das scrollend-Ereignis ausgelöst, sobald sie abgeschlossen ist.

Ereignis verwenden

Wie bei anderen Scroll-Ereignissen können Sie Listener auf verschiedene Arten registrieren.

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

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

oder verwenden Sie das Ereignisattribut:

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

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

Polyfills und progressive Verbesserung

Wenn Sie dieses neue Ereignis jetzt verwenden möchten, finden Sie hier unsere Empfehlungen. Sie können Ihre aktuelle Scroll-End-Strategie (falls vorhanden) weiterhin verwenden und am Anfang der Strategie die Unterstützung mit Folgendem prüfen:

'onscrollend' in window
// true, if available

Dadurch wird „true“ oder „false“ zurückgegeben, je nachdem, ob der Browser das Ereignis unterstützt. 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 das scrollend-Ereignis schrittweise zu verbessern, wenn es verfügbar ist. Sie können auch ein Polyfill (NPM) ausprobieren, das ich erstellt habe und das die bestmögliche Leistung des Browsers bietet:

import {scrollend} from "scrollyfills"

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

Das Polyfill wird schrittweise verbessert, um das integrierte scrollend-Ereignis des Browsers zu verwenden, falls verfügbar. Wenn sie nicht verfügbar ist, beobachtet das Skript Zeigerereignisse und Scrollvorgänge, um das Ende des Ereignisses so gut wie möglich zu schätzen.

Anwendungsfälle

Es empfiehlt sich, rechenintensive Aufgaben während des Scrollens zu vermeiden. So wird sichergestellt, dass beim Scrollen so viel Arbeitsspeicher und Rechenleistung wie möglich genutzt werden kann, um eine flüssige Darstellung zu ermöglichen. Ein scrollend-Ereignis ist der perfekte Zeitpunkt, um die harte Arbeit zu erledigen, da nicht mehr gescrollt wird.

Das Ereignis scrollend kann verwendet werden, um verschiedene Aktionen auszulösen. Ein häufiger Anwendungsfall ist die Synchronisierung zugehöriger UI-Elemente mit der Position, an der das Scrollen beendet wurde. Beispiel: – Synchronisieren der Scrollposition eines Karussells mit einer Punktanzeige. – Synchronisieren eines Galerieelements mit seinen Metadaten. – Daten abrufen, nachdem ein Nutzer zu einem neuen Tab gescrollt hat.

Stellen Sie sich ein Szenario vor, in dem ein Nutzer eine E‑Mail wegwischt. Nachdem sie mit dem Wischen fertig sind, können Sie die Aktion basierend darauf ausführen, wohin sie gescrollt haben.

Sie können dieses Ereignis auch für die Synchronisierung nach programmatischem oder nutzerseitigem Scrollen oder für Aktionen wie das Logging von Analysen verwenden.

Hier ist ein gutes Beispiel, bei dem mehrere Elemente wie Pfeile, Punkte und Fokus basierend auf der Scrollposition aktualisiert werden müssen. Sehen Sie sich an, wie ich dieses Karussell auf YouTube erstellt habe. Testen Sie auch die Live-Demo.

Vielen Dank an Mehdi Kazemi für die technische Arbeit und an Robert Flack für die Unterstützung bei der API und der Implementierung.