References

Beginner-friendly references for web development, with live, editable examples.

The HTML onscrollend event

Event All modern browsers Updated
Quick answer

The HTML onscrollend attribute runs JavaScript when scrolling finishes and the scroll position stops changing. It is an inline handler for the scrollend event; in modern code prefer addEventListener('scrollend', …).

Overview

The onscrollend event attribute runs JavaScript when scrolling ends. In JavaScript the event itself is named scrollend. Drop the on prefix when you call addEventListener.

It is a scroll event, fired once on a scrollable element or the document after scrolling has finished and the position has stopped changing. Unlike scroll, it does not fire repeatedly, so it is a cheap way to run work only when the user has settled.

You can wire this up with the inline onscrollend HTML attribute, but the modern, recommended approach is element.addEventListener('scrollend', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onscrollend="handler()">…</element>

element.addEventListener('scrollend', handler);

Best practices

  • Prefer element.addEventListener('scrollend', handler) over the inline onscrollend attribute; it separates behavior from markup and allows multiple handlers.
  • Throttle or debounce scroll handlers, or use requestAnimationFrame, since they fire rapidly.
  • Prefer IntersectionObserver for "is it in view" checks rather than scroll math.
  • Use the CSS scroll-behavior for smooth scrolling instead of scripting it.

Frequently asked questions

What is the onscrollend event?
It runs JavaScript when scrolling ends. In JavaScript the event is named scrollend.
How is scrollend different from scroll?
scroll fires continuously while the user scrolls; scrollend fires once, after the scrolling has stopped. Use scrollend to avoid throttling work yourself.
Do I still need to throttle a scrollend handler?
No. It fires once after scrolling stops, which is the point of it. Throttling is only needed for the continuous scroll event.
Should I use the onscrollend attribute or addEventListener?
Prefer element.addEventListener('scrollend', …) in JavaScript. The inline onscrollend attribute works but mixes behavior into the markup and allows only one handler per element.
onscroll onsearch