Löschen Sie die Zeitüberschreitungsfunktionen und schütteln Sie ihre Fehler ab. Sie benötigen dieses Ereignis: gescrollt.
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.
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.