Dokument: 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 die Dokumentansicht gescrollt wurde.
Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe das scrollend-Ereignis von 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 Ereignisbehandlungseigenschaft.
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Drosselung von Scroll-Ereignissen
Da scroll-Ereignisse mit hoher Rate ausgelöst werden können, sollte der Ereignishandler keine rechenintensiven Operationen wie DOM-Änderungen ausführen. Wenn Sie ein Ruckeln beim schnellen Scrollen bemerken, sollten Sie in Erwägung ziehen, das Ereignis zu drosseln.
Beachten Sie, dass Sie Code sehen könnten, der den scroll-Ereignishandler mit requestAnimationFrame() drosselt. Dies ist nutzlos, da Animation-Frame-Rückrufe mit der gleichen Rate wie scroll-Ereignishandler ausgelöst werden. Stattdessen müssen Sie das Timeout selbst messen, beispielsweise durch die Verwendung von 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 können Sie in Erwägung ziehen, IntersectionObserver zu verwenden, der eine schwellenwertbasierte Überwachung ermöglicht.
Spezifikationen
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |
Browser-Kompatibilität
Loading…