Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dasscroll-Ereignis wird ausgelöst, wenn ein Element gescrollt wurde.Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe dasscrollend-Ereignis vonElement.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignisbehandlereigenschaft.
addEventListener("scroll", (event) => { })onscroll = (event) => { }Ereignistyp
Ein generischesEvent.
Beispiele
Die folgenden Beispiele zeigen, wie dasscroll-Ereignis mit einem Ereignis-Listener und mit deronscroll-Ereignisbehandlereigenschaft verwendet wird.Die MethodesetTimeout() wird verwendet, um die Ereignisbehandlung zudrosseln, dascroll-Ereignisse mit hoher Frequenz ausgelöst werden können.Für zusätzliche Beispiele, dierequestAnimationFrame() verwenden, siehe dieDocumentscroll-Ereignisseite.
Verwendung vonscroll mit einem Ereignis-Listener
Das folgende Beispiel zeigt, wie dasscroll-Ereignis verwendet wird, um zu erkennen, wann ein Benutzer innerhalb eines Elements scrollt:
<div> <p>Scroll me!</p></div><p>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 deronscroll-Ereignisbehandlereigenschaft
Das folgende Beispiel zeigt, wie dieonscroll-Ereignisbehandlereigenschaft verwendet wird, um zu erkennen, wann ein Benutzer scrollt:
<div> <p>Scroll me!</p></div><p>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 |