Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Element: scrollend-Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Dasscrollend-Ereignis wird ausgelöst, wenn das Scrollen eines Elements abgeschlossen ist. Scrollen gilt als abgeschlossen, wenn die Scrollposition keine ausstehenden Updates mehr hat und der Benutzer seine Geste abgeschlossen hat.
Scrollpositions-Updates beinhalten glattes oder sofortiges Scrollen mit dem Mausrad, Scrollen mit der Tastatur, Scroll-Snap-Ereignisse oder andere APIs und Gesten, die dazu führen, dass sich die Scrollposition aktualisiert. Benutzer-Gesten wie Touch-Panning oder Trackpad-Scrollen sind erst dann abgeschlossen, wenn Zeiger oder Tasten losgelassen wurden. Wenn sich die Scrollposition nicht geändert hat, wird kein scrollend-Ereignis ausgelöst.
Um zu erkennen, wann das Scrollen innerhalb eines Dokuments abgeschlossen ist, siehe dasscrollend-Ereignis vonDocument.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("scrollend", (event) => { })onscrollend = (event) => { }Ereignistyp
Ein generischesEvent.
Beispiel
Verwendung vonscrollend mit einem Ereignis-Listener
Das folgende Beispiel zeigt, wie man dasscrollend-Ereignis verwendet, um zu erkennen, wann der Benutzer das Scrollen beendet hat:
#scroll-box { height: 100px; width: 100px; float: left; overflow: scroll; outline: 4px dotted; margin: 4px;}#scroll-box-title { position: fixed; top: 5px; left: 5px; transform: translateX(0);}#large-element { height: 200px; width: 200px;}#output { text-align: center;}<div> <p>Scroll me!</p> <p></p></div><p>Waiting on scroll events...</p>const element = document.querySelector("div#scroll-box");const output = document.querySelector("p#output");element.addEventListener("scroll", (event) => { output.textContent = "scroll event fired, waiting for scrollend...";});element.addEventListener("scrollend", (event) => { output.textContent = "scrollend event fired!";});Verwendung deronscrollend-Ereignishandler-Eigenschaft
Das folgende Beispiel zeigt, wie man dieonscrollend-Ereignishandler-Eigenschaft verwendet, um zu erkennen, wann der Benutzer das Scrollen beendet hat:
#scroll-box { height: 100px; width: 100px; float: left; overflow: scroll; outline: 4px dotted; margin: 4px;}#scroll-box-title { position: fixed; top: 5px; left: 5px; transform: translateX(0);}#large-element { height: 200px; width: 200px;}#output { text-align: center;}<div> <p>Scroll me!</p> <p></p></div><p>Waiting on scroll events...</p>const element = document.querySelector("div#scroll-box");const output = document.querySelector("p#output");element.onscroll = (event) => { output.textContent = "Element scroll event fired, waiting for scrollend...";};element.onscrollend = (event) => { output.textContent = "Element scrollend event fired!";};Spezifikationen
| Specification |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |