Scrollend, ein neues JavaScript-Ereignis

Löschen Sie die 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 Methode, um zu erkennen, dass ein Scrollen abgeschlossen war. Das bedeutete, dass Ereignisse erst spät oder kurz vor dem auf dem Bildschirm zu sehen war. Diese Unzuverlässigkeit, zu wissen, wann Scrollen zu Fehlern und einer schlechten Nutzererfahrung geführt hat.

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

Mit dieser setTimeout()-Strategie kannst du am besten wissen, ob das Scrollen für 100ms. Dies ähnelt eher dem Ereignis „Scrollen wurde unterbrochen“, beendeten Termin.

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

document.onscrollend = event => {…}

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

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.

Der Grund dafür, dass diese Veranstaltung so lange auf der Webplattform gedauert hat, waren die vielen die Spezifikationsdetails erforderten. Einer der komplexesten Bereiche hat die scrollend-Details für den visuellen Darstellungsbereich artikuliert. im Vergleich zum Dokument. Nehmen wir eine Webseite, die Sie heranzoomen. Sie können scrollen, in diesem herangezoomten Zustand herum, und es wird nicht unbedingt Dokument. Selbst dieses nutzergesteuerte Scrollen im visuellen Darstellungsbereich Interaktion gibt nach Abschluss das scrollend-Ereignis 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. Sie können die aktuelle Strategie für das Scroll-Ende (falls vorhanden) weiterverwenden und Am Anfang sollte die Unterstützung folgendermaßen geprüft werden:

'onscrollend' in window
// true, if available

Dadurch wird „true“ oder „false“ zurückgegeben, je nachdem, ob der Browser das Ereignis anbietet. Mit 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 dein scrollend-Ereignis schrittweise zu verbessern, verfügbar ist. Sie können auch Folgendes versuchen: Polyfill (NPM) Von mir erstellt, der die beste Leistung erzielt kann der Browser:

import {scrollend} from "scrollyfills"

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

Das Polyfill wird nach und nach optimiert, um den integrierten Browser scrollend zu verwenden falls 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, rechenintensive Arbeit zu vermeiden, während das Scrollen was gerade passiert. Durch diese Vorgehensweise wird sichergestellt, dass beim Scrollen so viel Arbeitsspeicher und damit alles reibungslos funktioniert. 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. Hier einige Beispiele: – Synchronisieren 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 Abschluss können Sie die Aktion für die jeweilige Stelle ausführen, zu der sie gescrollt haben.

Sie können dieses Ereignis auch zur Synchronisierung nach einem programmatischen oder Nutzerstart verwenden. Scrollen oder Aktionen wie Logging von Analysen.

Hier ist ein gutes Beispiel, bei dem mehrere Elemente wie Pfeile, Punkte und Fokus, müssen entsprechend der Scrollposition aktualisiert werden. 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.