Outils HTML

Gratuit Generateur de snippet scrollend

Generez des gestionnaires d'evenement scrollend qui se declenchent apres le defilement complet avec inertie, avec comparaison debounce.

Chargement de l'outil...

Qu'est-ce que Generateur de snippet scrollend ?

The scrollend event is a browser-native event that fires when scrolling has fully completed -- including momentum scrolling, rubber-banding, and inertia decay. Unlike the scroll event which fires continuously during scrolling, or debounced scroll handlers that guess when scrolling stopped based on arbitrary timeouts, scrollend fires exactly once when the user scroll gesture is truly finished. The event fires both for programmatic scrolling (scrollTo, scrollBy, scrollIntoView) and for user-initiated scrolling via touch, mouse wheel, keyboard, or trackpad. Baseline 2025, supported in Chrome 114+, Edge 114+, Safari 17.5+, and Firefox 131+.

Réponse rapide

The scrollend event fires when scrolling has fully completed including momentum, inertia, and rubber-banding. Unlike debounced scroll handlers that guess the end of scrolling with arbitrary timeouts, scrollend is a browser-native signal that fires exactly once at the true final scroll position. Baseline 2025 (Chrome 114+, Safari 17.5+, Firefox 131+). Use it for accurate infinite scroll triggering, scroll-position-based UI updates, and analytics impressions.

Limites

scrollend only fires on elements with actual scrollable overflow. Elements with overflow:scroll but no content exceeding their dimensions will never fire scrollend. Always verify the element has scrollable content before relying on the event.
scrollend does not fire during continuous scrolling -- it only signals completion. For real-time scroll tracking during the scroll gesture, you still need the scroll event paired with requestAnimationFrame for smooth updates.
scrollend may not fire for interrupted programmatic scrolling -- if a scrollTo or scrollBy call is interrupted by another scroll call before completing, the pending scrollend may be cancelled. Chain dependent actions inside the scrollend handler callback rather than assuming it will always execute.

Comment utiliser cet outil

Select the snippet type: basic scrollend listener with element or window target, scrollend with scroll position logging, or a side-by-side comparison of scrollend versus debounced scroll.
Configure the scroll target: window (document-level scrolling) or a specific element with overflow:auto or overflow:scroll.
Customize the handler action: log the final scroll position, update a UI element, load more content at the bottom, or trigger an animation when scrolling stops.
Copy the generated JavaScript snippet and paste it into your project. The comparison snippet shows both approaches with timing labels so you can see the difference in a live demo.

A quoi il sert

Trigger infinite scroll content loading only when the user has truly stopped scrolling, avoiding multiple loads during momentum scrolling.
Update a sticky table of contents or scroll-progress indicator at the exact final scroll position, not during intermediate positions.
Fire analytics events or impression tracking when the user finishes scrolling to a section, ensuring accurate measurement without double-counting.

Cas d'usage

Exemples concrets

Exemple

Infinite scroll with accurate load triggering

A social media feed uses scrollend to detect when the user reaches the bottom of the page and stops scrolling. Unlike a debounced scroll handler that may fire multiple loads during slow momentum scrolling, scrollend fires once when the scroll position settles, triggering a single content load. This prevents duplicate API calls and phantom loading states.

Exemple

Debounce comparison for scroll-aware navigation

A documentation site highlights the current section in the sidebar based on scroll position. Using scrollend, the highlight updates exactly when scrolling stops -- the user sees the correct section highlighted immediately. With a 200ms debounced scroll handler on a fast trackpad, the highlight often updates during mid-scroll flicker, jumping between sections before settling. The generated comparison snippet demonstrates both behaviors side by side.

Erreurs frequentes

Assuming scrollend fires on every scrollable element automatically -- scrollend only fires on elements that have actual scrollable overflow (scrollWidth greater than clientWidth or scrollHeight greater than clientHeight). An element with overflow:scroll but no overflow content will not fire scrollend.
Using scrollend where continuous scroll feedback is needed -- scrollend fires only when scrolling stops. For progress bars, parallax effects, or other visual updates that need to track intermediate scroll positions, use the regular scroll event with requestAnimationFrame for smooth updates.
Relying on scrollend for every scroll-completion use case -- programmatic scrolling via scrollBy or scrollIntoView may not trigger scrollend if the scrolling is interrupted by another scroll call. Chain your action in the scrollend handler rather than assuming it will always fire after a programmatic scroll.

Vérification

Create a scrollable div with enough content to scroll. Attach a scrollend listener that logs the final scrollTop value. Scroll the content and release -- verify that scrollend fires exactly once at the final resting position, not during the scroll gesture or momentum phase.
Compare scrollend against a debounced scroll handler (200ms timeout) in the same scrollable container. Scroll rapidly and observe that scrollend fires at the true end of scrolling while the debounced handler may fire multiple times or at slightly incorrect positions depending on scroll speed.

FAQ

Questions sur Generateur de snippet scrollend

How is scrollend different from a debounced scroll event listener?

A debounced scroll listener fires after a configurable timeout (often 100-300ms) since the last scroll event -- it guesses that scrolling has stopped. scrollend fires when the browser knows scrolling has stopped, based on the actual physics of the scroll gesture: momentum has decayed, rubber-banding has settled, and the viewport is at rest. scrollend has zero configurable timeout and cannot be fooled by slow scrolling. In practice, scrollend typically fires 50-500ms faster than a 200ms debounce and is never wrong about the final position.

Does scrollend work with touch scrolling and trackpad momentum?

Yes. scrollend accounts for all scroll input types: touch scrolling with momentum, trackpad gesture scrolling, mouse wheel clicks, keyboard scrolling (Page Up, Page Down, arrow keys), and programmatic scrollTo/scrollBy calls. The event fires when the scroll position has fully settled after any of these inputs, including the momentum phase of touch and trackpad gestures.

What happens if the user starts scrolling again before scrollend fires?

If a new scroll gesture begins during the momentum phase of a previous gesture, the pending scrollend event is cancelled and a new one is scheduled for the new gesture. This is the correct behavior -- scrollend should only fire when scrolling has truly stopped, and a new gesture means scrolling has not stopped. Debounced scroll handlers can produce false positives in this scenario, firing between gestures.

Can I cancel or prevent the default behavior of scrollend?

No. scrollend is a read-only event that signals completion -- it has no default behavior to cancel, and calling preventDefault() on it has no effect. It fires after the scroll action is complete and the browser has committed to the final scroll position. If you need to influence scrolling behavior, use the scroll event or a pointer events approach instead.

Outils lies