Scrollend, ein neues JavaScript-Ereignis

Löschen Sie die Zeitüberschreitungsfunktionen und schütteln Sie ihre Fehler ab. Sie benötigen dieses Ereignis also unbedingt: gescrollt.

Adam Argyle

Vor dem Ereignis scrollend gab es keine zuverlässige Möglichkeit, zu erkennen, dass ein Scrollen abgeschlossen ist. Das führte dazu, 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.

Vorher

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

Mit dieser setTimeout()-Strategie kannst du am besten feststellen, ob das Scrollen für 100ms gestoppt 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.

Nachher

document.onscrollend = event => {…}

Das ist gut. Perfekt abgestimmt auf die Zeit und voller sinnvoller Bedingungen, bevor das Licht ausstrahlt.

Unterstützte Browser

• 114
• 114
• 109
• x

Quelle

Testen!

Veranstaltungsdetails

Das Ereignis scrollend wird ausgelöst, wenn: - Das Scrollen im Browser nicht mehr animiert oder übersetzt wird. - Die Berührung des Nutzers wurde freigegeben. – Der Cursor des Nutzers hat den Schieberegler losgelassen. – Die Tastenaktivierung des Nutzers wurde aufgehoben. – Das Scrollen zum Textfragment ist abgeschlossen. - Das Scrollen wurde 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 zu keiner Übersetzung geführt.

Ein Grund dafür, dass diese Veranstaltung auf der Webplattform so lange gedauert hat, waren die vielen kleinen Details, die Spezifikationsdetails erforderten. 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 herangezoomten Zustand können Sie scrollen, ohne dass durch das Dokument gescrollt werden muss. 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 Enhancement

Wenn Sie dieses neue Ereignis jetzt verwenden möchten, haben wir hier einige Tipps für Sie. Du kannst deine aktuelle Scroll-End-Strategie (sofern vorhanden) weiterhin verwenden und zu Beginn die Unterstützung folgendermaßen prüfen:

'onscrollend' in window
// true, if available

Es wird „wahr“ oder „falsch“ zurückgegeben, je nachdem, ob das Ereignis vom Browser angeboten wird. 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. Sie können auch einen von mir erstellten Polyfill (NPM) ausprobieren, der die beste Leistung des Browsers bietet:

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 dies nicht der Fall, beobachtet das Skript Zeigerereignisse und scrollt entsprechend, um das Ende des Ereignisses bestmöglich einzuschätzen.

Anwendungsfälle

Es empfiehlt sich, beim Scrollen rechenintensive Arbeit zu vermeiden. Dadurch wird sichergestellt, dass beim Scrollen so viel Arbeitsspeicher und Verarbeitung wie möglich genutzt werden können, damit der Vorgang reibungslos verläuft. 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 der zugehörigen UI-Elemente mit der Position, an der das Scrollen gestoppt wurde. Beispiele: – Synchronisierung der Scrollposition eines Karussells mit einem Punktindikator. - Synchronisieren eines Galerieelements mit seinen Metadaten. – 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 der 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 ihre technische Arbeit und Robert Flack für die API- und Implementierungsanleitung.