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 Juli 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 Ereignisbehandlereigenschaft.
addEventListener("scroll", (event) => { }) onscroll = (event) => { } Ereignistyp
Ein generisches Event.
Beispiele
Die folgenden Beispiele zeigen, wie das scroll-Ereignis mit einem Ereignis-Listener und mit der onscroll-Ereignisbehandlereigenschaft verwendet wird. Die Methode setTimeout() wird verwendet, um die Ereignisbehandlung zu drosseln, da scroll-Ereignisse mit hoher 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 ein Benutzer innerhalb eines Elements scrollt:
<div id="scroll-box"> <p>Scroll me!</p> </div> <p id="output">Waiting on scroll events...</p> #scroll-box { overflow: scroll; height: 100px; width: 100px; float: left; } #scroll-box p { height: 200px; width: 200px; } #output { text-align: center; } 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-Ereignisbehandlereigenschaft
Das folgende Beispiel zeigt, wie die onscroll-Ereignisbehandlereigenschaft verwendet wird, um zu erkennen, wann ein Benutzer scrollt:
<div id="scroll-box"> <p>Scroll me!</p> </div> <p id="output">Waiting on scroll events...</p> #scroll-box { overflow: scroll; height: 100px; width: 100px; float: left; } #scroll-box p { height: 200px; width: 200px; } #output { text-align: center; } 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 |