Using the New scrollend Event to Detect When Scrolling Stops

When developing web pages, you may need to perform actions after the user stops scrolling. Before the scrollend event existed, developers relied on timers, which could fire late or while the user’s finger was still on the screen, leading to bugs and poor UX.

Overview : The classic approach used setTimeout() to guess when scrolling had paused, treating it more like a "scroll paused" event rather than a true "scroll ended" event.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

With the native scrollend event, the browser handles the detection for you:

document.onscrollend = event => { … }

An example on CodePen (https://codepen.io/web-dot-dev/pen/rNrJRKg) demonstrates the core usage:

document.onscrollend = event => {
  Toast('scroll end')
}

The scrollend event is triggered when any of the following occurs:

The user’s touch is released.

The user releases the scroll‑bar pointer.

The user releases a key.

A scroll‑to fragment navigation completes.

Scroll snapping finishes.

scrollTo() finishes moving.

The visual viewport has finished scrolling.

It will not fire when:

The gesture does not cause any change in scroll position.

scrollTo() results in no movement.

Implementing the event can be tricky because the specification must handle details such as the visual viewport versus document scrolling, especially on zoomed pages where the visual viewport may scroll independently of the document.

Like other scroll events, listeners can be attached in several ways:

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

Or by using event properties:

document.onscrollend = (event) => {
  // scroll ended
};
aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Browser support : As of now, only Firefox 109 implements scrollend . Chrome 111 is expected to add support soon.

To use the event safely, feature‑detect it and fall back to the timer method when unavailable:

if ('onscrollend' in window) {
  document.onscrollend = callback;
} else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer);
    window.scrollEndTimer = setTimeout(callback, 100);
  };
}

If you need broader compatibility, you can install the scrollyfills polyfill:

npm i -D scrollyfills

Then import and use the polyfilled event:

import { scrollend } from 'scrollyfills';

someElementThatScrolls.addEventListener('scrollend', event => {
  console.log('scroll has ended');
});

The polyfill progressively enhances the native scrollend when available and otherwise monitors pointer and scroll activity to approximate the event.

Reference: https://developer.chrome.com/blog/scrollend-a-new-javascript-event/