Element: scroll-Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das scroll-Ereignis wird ausgelöst, wenn ein Element gescrollt wurde.
Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe das scrollend-Ereignis von Element.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Die folgenden Beispiele zeigen, wie man das scroll-Ereignis mit einem Ereignis-Listener und mit der onscroll Ereignishandler-Eigenschaft verwendet.
Die Methode setTimeout() wird verwendet, um den Ereignishandler zu drosseln, da scroll-Ereignisse mit einer hohen Frequenz ausgelöst werden können.
Für zusätzliche Beispiele, die requestAnimationFrame() verwenden, siehe die Document scroll-Ereignisseite.
Verwendung von scroll mit einem Ereignis-Listener
Das folgende Beispiel zeigt, wie das scroll-Ereignis verwendet wird, um zu erkennen, wann der Benutzer innerhalb eines Elements scrollt:
<div
id="scroll-box"
style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" 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!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
Verwendung der onscroll Ereignishandler-Eigenschaft
Das folgende Beispiel zeigt, wie die onscroll Ereignishandler-Eigenschaft verwendet wird, um zu erkennen, wann der Benutzer scrollt:
<div
id="scroll-box"
style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">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!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
Spezifikationen
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |