jQuery Scroll Event

What You’ll Learn

The scroll event fires when scroll position changes inside an element. This tutorial covers .on("scroll") on overflow containers and $(window), logging to #log, .trigger("scroll"), page-scroll indicators, reading scrollTop, throttling fast handlers, the official jQuery API demos, and how this differs from resize, .scrollTop(), and the deprecated .scroll() method.

Introduction

Sticky headers, infinite scroll feeds, and reading progress bars all react when the user moves through content. The scroll event is jQuery’s hook for that moment — when scroll position changes inside a scrollable element, whether that element is the browser window or a div with overflowing content.

The official jQuery API distinguishes the scroll event (bound with .on("scroll") since 1.7) from the deprecated .scroll() method (legacy shorthand, deprecated since 3.3). To programmatically run scroll handlers, use .trigger("scroll") since jQuery 1.0.

Understanding the scroll Event

The scroll event is sent to an element when the user scrolls to a different place in the element. jQuery wraps the native event so you can bind with $("#target").on("scroll", handler) or $(window).on("scroll", handler) and chain further calls on the same collection.

It applies to window objects, scrollable frames, and elements with the overflow CSS property set to scroll or auto when the element’s explicit height or width is less than its contents. Scroll fires whenever scroll position changes — mouse wheel, scrollbar drag, arrow keys, touch, or programmatic .scrollTop() changes.

📝 Syntax

The modern jQuery API for the scroll event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("scroll" [, eventData ], handler) (since 1.7)

.on( "scroll" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called when scroll position changes: function( event ) { ... }.
• Bind on the scrollable element — window, a frame, or an overflow container whose content exceeds its box.

2. Trigger the event — .trigger("scroll") (since 1.0)

.trigger( "scroll" )

• Runs bound scroll handlers on the matched element(s) — typically $("#target") or $(window).
• Useful when your code changes scroll position and downstream widgets expect a scroll notification.

3. Unbind — .off("scroll" [, handler])

$( "#target" ).off( "scroll" );              // remove all scroll handlers
$( "#target" ).off( "scroll", throttledFn ); // remove one handler

Official jQuery API examples

$( "#target" ).on( "scroll", function() {
  $( "#log" ).append( " Handler for `scroll` called. " );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "scroll" );
} );

$( window ).on( "scroll", function() {
  $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
} );

Deprecated shorthand

jQuery also provided .scroll(handler) as a legacy binding shorthand and no-arg .scroll() to trigger the event. The binding form is deprecated since jQuery 3.3 — see the jQuery .scroll() method tutorial (coming soon) or migrate to .on("scroll") and .trigger("scroll").

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Inside the handler, this refers to the DOM element that scrolled — use $(this).scrollTop() or $(window).scrollTop() for the current offset.

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 extend the pattern with a scrollTop progress bar and throttled container scroll. Use the Try-it links to run each snippet in the browser.

$( "#target" ).on( "scroll", function() {
  $( "#log" ).append( " Handler for `scroll` called. " );
} );

Page loads → handler bound on #target

Scroll inside the blue box → #log gains:
  Handler for scroll called.

Fires on wheel, scrollbar drag, arrow keys, or touch inside #target

$( "#target" ).on( "scroll", function() {
  $( "#log" ).text( "Handler for scroll called." );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "scroll" );
} );

Click Trigger the handler → trigger("scroll") runs bound handler

#log shows: Handler for scroll called.

Works even when scroll position did not change — handlers still run

$( window ).on( "scroll", function() {
  $( "#msg" ).css( "display", "inline-block" ).stop( true, true ).fadeOut( 800 );
} );

Scroll the page → red badge appears briefly

Badge fades out over 800 ms (official span fadeOut pattern)

Bind on $(window) for document-level scroll, not inner containers

function updateProgress() {
  var st = $( window ).scrollTop();
  var max = $( document ).height() - $( window ).height();
  var pct = max > 0 ? Math.round( ( st / max ) * 100 ) : 0;
  $( "#bar" ).css( "width", pct + "%" );
  $( "#pct" ).text( pct + "%" );
}

$( window ).on( "scroll", updateProgress );
updateProgress();

Scroll page → top bar width grows from 0% to 100%

#pct shows current percentage

scrollTop / (document height − window height) = progress ratio

var raw = 0, th = 0, last = 0;

$( "#panel" ).on( "scroll", function() {
  raw++;
  $( "#raw" ).text( raw );

  var now = Date.now();
  if ( now - last >= 150 ) {
    last = now;
    th++;
    $( "#th" ).text( th );
  }
} );

Fast scroll inside #panel → raw count climbs quickly

Throttled runs increment only every 150 ms

Heavy work should use the throttled path, not every raw event

🚀 Common Use Cases

• Sticky headers and nav — toggle fixed positioning or shadow classes when $(window).scrollTop() passes a threshold.
• Reading progress bars — update a top bar or sidebar indicator as the user moves through long articles.
• Infinite scroll feeds — load the next page when scroll nears the bottom of a container or the document.
• Scroll-spy navigation — highlight the active section link based on which heading is currently in view.
• Overflow panel sync — bind on chat logs, data tables, or map sidebars that scroll independently of the page.
• Manual scroll notifications — use .trigger("scroll") after programmatic .scrollTop() changes so widgets that only listen for scroll also update.

📝 Notes

• Bind with .on("scroll", handler) since jQuery 1.7 — not the deprecated .scroll() shorthand.
• Trigger with .trigger("scroll") since jQuery 1.0.
• Applies to window, scrollable frames, and elements with overflow:scroll or overflow:auto when content overflows.
• Scroll fires whenever scroll position changes — wheel, scrollbar, keys, drag, or touch — regardless of the cause.
• Throttle or debounce expensive layout, measurement, and animation code inside scroll handlers.
• scroll is not resize — resize fires when viewport size changes, not when content position moves.
• The scroll event is not .scrollTop() — that method gets or sets offset; the event notifies you when offset changes.
• Use .off("scroll") to remove handlers — avoid deprecated .unbind("scroll") or legacy .scroll().

💡 Best Practices