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 on a scrollable element or the document as the user scrolls. Scroll events can fire rapidly, so heavy work in the handler can hurt performance — throttle it, or prefer the more efficient IntersectionObserver where you can.

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.
Why is my scroll handler slow?
Scroll events fire very frequently. Throttle the work, or move it into a requestAnimationFrame callback.
What can I use instead of a scroll listener?
For detecting when elements enter the viewport, IntersectionObserver is more efficient than listening to scroll.
Should I use the onscrollend attribute or addEventListener?
Prefer addEventListener('scrollend', …) in JavaScript. The inline onscrollend attribute works but mixes behavior into the markup and allows only one handler per element.
onscroll onsearch