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.
Das scrollend-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 das scrollend-Ereignis von Document.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("scrollend", (event) => { })
onscrollend = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiel
Verwendung von scrollend mit einem Ereignis-Listener
Das folgende Beispiel zeigt, wie man das scrollend-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 id="scroll-box">
<p id="scroll-box-title">Scroll me!</p>
<p id="large-element"></p>
</div>
<p id="output">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 der onscrollend-Ereignishandler-Eigenschaft
Das folgende Beispiel zeigt, wie man die onscrollend-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 id="scroll-box">
<p id="scroll-box-title">Scroll me!</p>
<p id="large-element"></p>
</div>
<p id="output">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 |
Browser-Kompatibilität
Loading...