HTML-Tools

Kostenlose scrollend Event Snippet Generator

Generieren Sie scrollend-Event-Handler, die nach vollstandigem Scrollen mit Momentum/Inertia auslosen, mit Debounce-Vergleich.

Tool wird geladen...

Was ist scrollend Event Snippet Generator?

Das scrollend-Ereignis ist ein browser-natives Ereignis, das ausgelöst wird, wenn das Scrollen vollständig abgeschlossen ist - einschließlich Momentum-Scrolling, Gummi-Effekt und Trägheitsabfall. Anders als das scroll-Event, das kontinuierlich während des Scrollens feuert, oder debounced Scroll-Handler, die anhand willkürlicher Timeouts raten, wann das Scrollen aufgehört hat, feuert scrollend genau einmal, wenn die Scroll-Geste des Benutzers wirklich beendet ist. Das Ereignis feuert sowohl für programmatisches Scrollen (scrollTo, scrollBy, scrollIntoView) als auch für benutzerinitiiertes Scrollen per Touch, Mausrad, Tastatur oder Trackpad. Baseline 2025, unterstützt in Chrome 114+, Edge 114+, Safari 17.5+ und Firefox 131+.

Kurze Antwort

Das scrollend-Event feuert, wenn das Scrollen vollständig abgeschlossen ist, einschließlich Momentum, Trägheit und Gummi-Effekt. Anders als debounced Scroll-Handler, die das Ende des Scrollens mit willkürlichen Timeouts erraten, ist scrollend ein browser-natives Signal, das genau einmal an der wahren endgültigen Scroll-Position feuert. Baseline 2025 (Chrome 114+, Safari 17.5+, Firefox 131+). Verwenden Sie es für präzises Infinite-Scroll-Triggering, scrollpositionsbasierte UI-Updates und Analytics-Impressions.

Last updated: 2026-06-02

Einschränkungen

scrollend feuert nur auf Elementen mit tatsächlichem scrollbarem Überlauf. Elemente mit overflow:scroll aber ohne Inhalt, der ihre Abmessungen überschreitet, werden niemals scrollend feuern. Überprüfen Sie immer, ob das Element scrollbaren Inhalt hat, bevor Sie sich auf das Ereignis verlassen.
scrollend feuert nicht während kontinuierlichem Scrollen - es signalisiert nur den Abschluss. Für Echtzeit-Scroll-Tracking während der Scroll-Geste benötigen Sie weiterhin das scroll-Event in Verbindung mit requestAnimationFrame für flüssige Aktualisierungen.
scrollend feuert möglicherweise nicht für unterbrochenes programmatisches Scrollen - wenn ein scrollTo- oder scrollBy-Aufruf durch einen anderen Scroll-Aufruf unterbrochen wird, bevor er abgeschlossen ist, kann das ausstehende scrollend abgebrochen werden. Verketten Sie abhängige Aktionen innerhalb des scrollend-Handler-Callbacks, anstatt anzunehmen, dass er immer ausgeführt wird.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Wählen Sie den Snippet-Typ: einfacher scrollend-Listener mit Element- oder Window-Ziel, scrollend mit Scroll-Positionsprotokollierung oder ein Side-by-Side-Vergleich von scrollend versus debounced scroll.
Konfigurieren Sie das Scroll-Ziel: window (Dokumentebene-Scrolling) oder ein bestimmtes Element mit overflow:auto oder overflow:scroll.
Passen Sie die Handler-Aktion an: protokollieren Sie die endgültige Scroll-Position, aktualisieren Sie ein UI-Element, laden Sie mehr Inhalt am unteren Rand oder lösen Sie eine Animation aus, wenn das Scrollen stoppt.
Kopieren Sie das generierte JavaScript-Snippet und fügen Sie es in Ihr Projekt ein. Das Vergleichs-Snippet zeigt beide Ansätze mit Zeitstempel-Labels, sodass Sie den Unterschied in einer Live-Demo sehen können.

Wofür du es nutzen kannst

Lösen Sie Infinite-Scroll-Inhaltsladungen nur aus, wenn der Benutzer wirklich mit dem Scrollen aufgehört hat, und vermeiden Sie mehrere Ladungen während des Momentum-Scrollens.
Aktualisieren Sie ein klebriges Inhaltsverzeichnis oder einen Scroll-Fortschrittsindikator an der exakten endgültigen Scroll-Position, nicht während Zwischenpositionen.
Feuern Sie Analytics-Ereignisse oder Impression-Tracking, wenn der Benutzer das Scrollen zu einem Abschnitt beendet hat, und gewährleisten Sie genaue Messung ohne Doppelzählung.

Anwendungsfalle

Praxisbeispiele

Beispiel

Infinite Scroll mit präzisem Lade-Trigger

Ein Social-Media-Feed verwendet scrollend, um zu erkennen, wann der Benutzer den unteren Rand der Seite erreicht und mit dem Scrollen aufgehört hat. Anders als ein debounced Scroll-Handler, der bei langsamem Momentum-Scrolling mehrere Ladungen auslösen kann, feuert scrollend einmal, wenn sich die Scroll-Position beruhigt hat, und löst eine einzelne Inhaltsladung aus. Dies verhindert doppelte API-Aufrufe und Phantom-Ladezustände.

Beispiel

Debounce-Vergleich für scroll-bewusste Navigation

Eine Dokumentationsseite hebt den aktuellen Abschnitt in der Seitenleiste basierend auf der Scroll-Position hervor. Mit scrollend aktualisiert sich die Hervorhebung genau dann, wenn das Scrollen stoppt - der Benutzer sieht sofort den korrekten Abschnitt hervorgehoben. Mit einem 200ms debounced Scroll-Handler auf einem schnellen Trackpad aktualisiert sich die Hervorhebung oft während des Scroll-Flickers und springt zwischen Abschnitten hin und her.

Haufige Fehler

Anzunehmen, dass scrollend automatisch auf jedem scrollbaren Element feuert - scrollend feuert nur auf Elementen, die tatsächlich scrollbaren Überlauf haben (scrollWidth größer als clientWidth oder scrollHeight größer als clientHeight). Ein Element mit overflow:scroll aber ohne Überlaufinhalt feuert kein scrollend.
scrollend zu verwenden, wo kontinuierliches Scroll-Feedback benötigt wird - scrollend feuert nur, wenn das Scrollen stoppt. Für Fortschrittsbalken, Parallax-Effekte oder andere visuelle Aktualisierungen, die Zwischen-Scroll-Positionen verfolgen müssen, verwenden Sie das reguläre scroll-Event mit requestAnimationFrame für flüssige Aktualisierungen.
Sich auf scrollend für jeden Scroll-Abschluss-Anwendungsfall zu verlassen - programmatisches Scrollen per scrollBy oder scrollIntoView löst möglicherweise kein scrollend aus, wenn das Scrollen durch einen anderen Scroll-Aufruf unterbrochen wird. Verketten Sie Ihre Aktion im scrollend-Handler, anstatt anzunehmen, dass er nach einem programmatischen Scroll immer feuert.

Überprüfung

Erstellen Sie ein scrollbares Div mit ausreichend Inhalt zum Scrollen. Fügen Sie einen scrollend-Listener hinzu, der den endgültigen scrollTop-Wert protokolliert. Scrollen Sie den Inhalt und lassen Sie los - überprüfen Sie, dass scrollend genau einmal an der endgültigen Ruheposition feuert, nicht während der Scroll-Geste oder der Momentum-Phase.
Vergleichen Sie scrollend mit einem debounced Scroll-Handler (200ms Timeout) im selben scrollbaren Container. Scrollen Sie schnell und beobachten Sie, dass scrollend am wahren Ende des Scrollens feuert, während der debounced Handler je nach Scroll-Geschwindigkeit mehrmals oder an leicht ungenauen Positionen feuern kann.

FAQ

Fragen zu scrollend Event Snippet Generator

Wie unterscheidet sich scrollend von einem debounced Scroll-Event-Listener?

Ein debounced Scroll-Listener feuert nach einem konfigurierbaren Timeout (oft 100-300ms) seit dem letzten scroll-Event - er rät, dass das Scrollen aufgehört hat. scrollend feuert, wenn der Browser weiß, dass das Scrollen aufgehört hat, basierend auf der tatsächlichen Physik der Scroll-Geste: das Momentum ist abgeklungen, der Gummi-Effekt hat sich beruhigt und der Viewport ist in Ruhe. scrollend hat kein konfigurierbares Timeout und kann nicht durch langsames Scrollen getäuscht werden. In der Praxis feuert scrollend typischerweise 50-500ms schneller als ein 200ms-Debounce und liegt nie falsch mit der endgültigen Position.

Funktioniert scrollend mit Touch-Scrolling und Trackpad-Momentum?

Ja. scrollend berücksichtigt alle Scroll-Eingabetypen: Touch-Scrolling mit Momentum, Trackpad-Gesten-Scrolling, Mausradklicks, Tastatur-Scrolling (Bild auf, Bild ab, Pfeiltasten) und programmatische scrollTo/scrollBy-Aufrufe. Das Ereignis feuert, wenn sich die Scroll-Position nach einer dieser Eingaben vollständig beruhigt hat, einschließlich der Momentum-Phase von Touch- und Trackpad-Gesten.

Was passiert, wenn der Benutzer erneut zu scrollen beginnt, bevor scrollend feuert?

Wenn eine neue Scroll-Geste während der Momentum-Phase einer vorherigen Geste beginnt, wird das ausstehende scrollend-Event abgebrochen und ein neues für die neue Geste geplant. Dies ist das korrekte Verhalten - scrollend sollte nur feuern, wenn das Scrollen wirklich aufgehört hat, und eine neue Geste bedeutet, dass das Scrollen nicht aufgehört hat. Debounced Scroll-Handler können in diesem Szenario falsch-positive Ergebnisse liefern, die zwischen Gesten feuern.

Kann ich das Standardverhalten von scrollend abbrechen oder verhindern?

Nein. scrollend ist ein schreibgeschütztes Ereignis, das den Abschluss signalisiert - es hat kein Standardverhalten, das abgebrochen werden kann, und der Aufruf von preventDefault() darauf hat keine Wirkung. Es feuert, nachdem die Scroll-Aktion abgeschlossen ist und der Browser die endgültige Scroll-Position festgelegt hat. Wenn Sie das Scroll-Verhalten beeinflussen müssen, verwenden Sie stattdessen das scroll-Event oder einen Pointer-Events-Ansatz.

Verwandte Tools