Scrollend, ein neues JavaScript-Ereignis

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

Adam Argyle

Vor dem scrollend-Ereignis gab es keine zuverlässige Möglichkeit, um festzustellen, ob ein Scrollen abgeschlossen wurde. Das bedeutete, dass Ereignisse erst spät oder dann ausgelöst wurden, wenn der Finger noch nicht auf dem Bildschirm zu sehen war. Diese Unzuverlässigkeit, zu wissen, wann das Scrollen tatsächlich beendet ist, hat zu Fehlern und einer schlechten Nutzererfahrung geführt.

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. Dies ähnelt eher dem Ereignis „Scrollen wurde unterbrochen“, nicht „Scrollen hat beendet“.

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

Nachher

document.onscrollend = event => {…}

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

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 Zeiger des Nutzers hat den Scroll-Daumen freigegeben. - Der Tastendruck des Nutzers wurde losgelassen. - Das Scrollen zum Fragment ist abgeschlossen. - Das Scrollen wurde abgeschlossen. – scrollTo() wurde 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, warum diese Veranstaltung auf der Webplattform so lange gedauert hat, waren die vielen kleinen Details, die Spezifikationsdetails erforderten. Einer der komplexesten Bereiche war die Formulierung der scrollend-Details für den visuellen Darstellungsbereich im Vergleich zum Dokument. Nehmen wir eine Webseite, die Sie heranzoomen. In diesem herangezoomten Zustand können Sie scrollen, ohne dass durch das Dokument gescrollt werden muss. Selbst diese nutzergesteuerte Scroll-Interaktion des visuellen Darstellungsbereichs gibt das scrollend-Ereignis nach Abschluss aus.

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 diese neue Veranstaltung jetzt nutzen möchten, finden Sie hier unsere besten Tipps. 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

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

So kannst du dein scrollend-Ereignis schrittweise verbessern, 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

Der Polyfill wird nach und nach optimiert, um das im Browser integrierte scrollend-Ereignis zu verwenden, 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. Ein scrollend-Ereignis bietet die perfekte Gelegenheit, darauf hinzuweisen und die harte Arbeit zu erledigen, da Scrollen nicht mehr stattfindet.

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. Beispiel: – Synchronisierung einer Karussell-Scrollposition mit Punktanzeige. - 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 dem Wischen können Sie die Aktion basierend auf der Stelle ausführen, zu der sie gescrollt haben.

Sie können dieses Ereignis auch zur Synchronisierung nach dem programmatischen oder Scrollen durch den Nutzer 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. 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 ihre technische Arbeit und Robert Flack für die API- und Implementierungsanleitung.