jQuery Scroll Event

The scroll event runs when a scrollable element or the browser window is scrolled. It can fire many times during one scroll gesture, so handlers should stay lightweight.

Syntax Top ↑

$( window ).on( "scroll", function () {
    // Window scrolled.
});

Handle Element and Window Scrolling Top ↑

$( function () {
    $( "#t1" ).on( "scroll", function () {
        $( "#d1" ).text( "Textarea scrolling..." );
        setTimeout( function () {
            $( "#d1" ).text( "Textarea stopped..." );
        }, 500 );
    });

    $( window ).on( "scroll", function () {
        $( "#d1" ).text( "Window scrolling..." );
        setTimeout( function () {
            $( "#d1" ).text( "Window stopped..." );
        }, 500 );
    });
});

Example HTML Top ↑

<textarea id="t1" rows="5" cols="25">
Line one
Line two
Line three
Line four
Line five
Line six
</textarea>
<div id="d1" class="alert alert-primary">Scroll this page or textarea.</div>

For production interfaces, use a proper debounce/timer-reset pattern if you need to detect when scrolling has really stopped.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: