Handle scroll stop

JavaScript, Browser, Event · Jan 6, 2021

Runs the callback whenever the user has stopped scrolling.

Use EventTarget.addEventListener() to listen for the 'scroll' event.
Use setTimeout() to wait 150 ms until calling the given callback.
Use clearTimeout() to clear the timeout if a new 'scroll' event is fired in under 150 ms.

const onScrollStop = callback => {
  let isScrolling;
  window.addEventListener(
    'scroll',
    e => {
      clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        callback();
      }, 150);
    },
    false
  );
};

onScrollStop(() => {
  console.log('The user has stopped scrolling');
});

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.