Skip to main content Accessibility Feedback

Detecting when a visitor has stopped scrolling with vanilla JavaScript

For one of my open source projects, I was recently asked if there’s a way to delay running something until after scrolling has finished.

There’s no native JavaScript event for when scrolling stops, but it is something you can detect pretty easily with just a few lines of code.

The Approach #

We want to listen for scroll events using addEventListener. We’ll set a delayed timeout function to run a few milliseconds after the event, but with each scroll event we’ll clear that timeout function so it doesn’t run.

When scrolling has stopped, the delayed function doesn’t get cleared and runs.

The Code #

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

    // Clear our timeout throughout the scroll
    window.clearTimeout( isScrolling );

    // Set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {

        // Run the callback
        console.log( 'Scrolling has stopped.' );

    }, 66);

}, false);

A Helper Function #

I’ve thrown together a really lightweight helper function, scrollStop.js, that you can use on your projects.

Add the function to your script and then pass in the code to run when scrolling stops as a callback.

var scrollStop = function (callback) {

scrollStop(function () {
    console.log( 'Scrolling has stopped.' ); 

You can download scrollStop on GitHub. or view the demo.

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips