Dokument: scroll event
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 die Dokumentansicht gescrollt wurde. Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe das scrollend-Ereignis des Document. Für das Scrollen von Elementen siehe das scroll-Ereignis von Element.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Throttling des Scroll-Ereignisses
Da scroll-Ereignisse in hoher Frequenz ausgelöst werden können, sollte der Ereignis-Handler keine rechenintensiven Operationen wie DOM-Modifikationen ausführen. Wenn Sie bei schnellem Scrollen ein Ruckeln bemerken, sollten Sie in Betracht ziehen, das Ereignis zu drosseln.
Beachten Sie, dass Sie möglicherweise Code sehen, der den scroll-Ereignis-Handler mit requestAnimationFrame() drosselt. Dies ist nutzlos, da Animationsframe-Rückrufe mit der gleichen Frequenz wie scroll-Ereignis-Handler ausgeführt werden. Stattdessen müssen Sie die Timeout-Zeit selbst messen, beispielsweise mit setTimeout().
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
// Do something with the scroll position
}
document.addEventListener("scroll", (event) => {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
// Throttle the event to "do something" every 20ms
setTimeout(() => {
doSomething(lastKnownScrollPosition);
ticking = false;
}, 20);
ticking = true;
}
});
Alternativ sollten Sie erwägen, stattdessen IntersectionObserver zu verwenden, der ein schwellenwertbasiertes Zuhören ermöglicht.
Spezifikationen
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |
Browser-Kompatibilität
Loading…