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 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.

Vorher

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 scrollend führt der Browser diese schwierige Auswertung für Sie durch.

Nachher

document.onscrollend = event => {…}

Das ist gut. Perfekt abgestimmt und voll von bedeutsamen Bedingungen bevor sie ausstrahlen.

Unterstützte Browser

• 114
• 114
• 109
• x

Quelle

Testen!

Veranstaltungsdetails

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

Das scrollend-Ereignis wird in folgenden Fällen nicht ausgelöst: - Die Geste des Nutzers hat nicht zu einer Positionsänderung beim Scrollen geführt (keine Übersetzung). - scrollTo() hat zu keiner Übersetzung geführt.

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 haben Sie mehrere Möglichkeiten zum Registrieren von Listenern.

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 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

Dadurch wird „true“ oder „false“ 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 sie nicht verfügbar, beobachtet das Skript Zeigerereignisse und Scrollen, um das Ende des Ereignisses bestmöglich einzuschätzen.

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. scrollend-Ereignis verwenden ist der perfekte Zeitpunkt, darauf hinzuweisen und die harte Arbeit zu erledigen, denn Scrollen ist findet nicht mehr statt.

Mit dem Ereignis scrollend können verschiedene Aktionen ausgelöst werden. Ein häufiger Anwendungsfall synchronisiert die zugehörigen UI-Elemente mit der Position, angehalten. 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. Nach Abschluss können Sie die Aktion für die jeweilige Stelle ausführen, zu der sie gescrollt haben.

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. Sehen Sie sich an, wie ich dieses Karussell auf YouTube gebaut 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.