HTML onscrollend Event Attribute

The onscrollend event fires when a scrolling operation has completed on an element or the document. Unlike the onscroll event - which triggers continuously while scrolling - onscrollend only fires once the scrolling motion stops.

This makes it ideal for detecting when the user has finished scrolling, rather than reacting to every scroll movement.

How It Works

The onscrollend event is triggered when:

• A user finishes scrolling (via mouse, touch, trackpad, or keyboard).
• Momentum scrolling comes to rest.
• A programmatic scroll (e.g. scrollTo()) completes.

It does not fire continuously like onscroll, making it more performance-friendly for tasks such as:

• Lazy loading content
• Updating UI states
• Triggering animations after scrolling
• Logging scroll completion events

Example (Basic Usage)

<div 
  style="height: 150px; overflow-y: auto; border: 1px solid #ccc;"
  onscrollend="alert('Scrolling finished!')"
>
  <p>Scroll inside this box.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
</div>

✅ The alert appears only after scrolling stops, not during the scroll.

JavaScript Example

<div id="box" style="height: 150px; overflow-y: auto;">
  <p>Scrollable content...</p>
  <p>More text...</p>
  <p>Even more text...</p>
</div>

<script>
  const box = document.getElementById("box");

  box.onscrollend = () => {
    console.log("Scrolling has ended");
  };
</script>

Fallback Alternative (Debounced Scroll)

If you need broader support, you can simulate onscrollend using a debounce technique:

<script>
let scrollTimeout;

window.addEventListener("scroll", () => {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    console.log("Scrolling ended (fallback)");
  }, 150);
});
</script>

This approach mimics the behavior of onscrollend.

Common Use Cases

• Detecting when a user finishes reading content
• Triggering animations after scrolling
• Loading additional content (infinite scroll)
• Improving performance by reducing frequent event firing

Notes

• The event works on scrollable elements and the document.
• It does not bubble like some other events.
• Works best when combined with overflow: auto or overflow: scroll.