jQuery .scroll() Method

What You’ll Learn

The .scroll() method is jQuery’s legacy shorthand for binding and triggering the scroll event on the window or overflow elements. This tutorial covers .scroll(handler) since 1.0, .scroll(eventData, handler) since 1.4.3, no-argument .scroll() as a trigger, migration to .on("scroll") and .trigger("scroll"), why the binding form is deprecated since jQuery 3.3 but still works in 3.x, and how it differs from .scrollTop(). See the jQuery scroll event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .scroll(), .resize(), .click(), and more. The .scroll() method let you react to scrolling in one short call: $(window).scroll(function(){ updateProgress(); }). It remains in jQuery 3.x for backward compatibility but is marked deprecated since 3.3 — unlike .error(), which was removed in jQuery 3.0.

Understanding .scroll() matters when reading older infinite-scroll, sticky-header, and chat-panel tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("scroll", handler) for binding and .trigger("scroll") for firing. Do not confuse this event shorthand with .scrollTop(), which reads or sets scroll position.

Understanding the .scroll() Method

The official jQuery API describes .scroll() as a way to bind an event handler to the scroll event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user scrolls — the same scroll event that .on("scroll") handles today. Bind on $(window) for page-level scroll or on overflow containers for local scroll.

When you call .scroll() with no arguments, jQuery synthetically fires the scroll event on each matched element. Bound handlers run once per call. This trigger behavior is equivalent to .trigger("scroll"). It does not change scroll position — use .scrollTop() for that.

📝 Syntax

The .scroll() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("scroll") is preferred:

1. Bind a handler — .scroll( handler ) (since 1.0, deprecated 3.3)

.scroll( handler )

• handler — function executed each time scroll fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Bind on $(window) for page scroll or on overflow elements for container scroll.
• Modern replacement: .on( "scroll", handler ).

2. Bind with eventData — .scroll( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.scroll( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "scroll", eventData, handler ).

3. Trigger the event — .scroll() (since 1.0)

.scroll()

• No arguments — triggers scroll on every matched element.
• Runs bound scroll handlers.
• Preferred replacement: .trigger( "scroll" ).

Official jQuery API migration note

// Deprecated binding
$( window ).scroll( function() {
  alert( "Handler for `scroll` called." );
} );

// Modern binding
$( window ).on( "scroll", function() {
  alert( "Handler for `scroll` called." );
} );

// Deprecated trigger
$( window ).scroll();

// Modern trigger
$( window ).trigger( "scroll" );

Return value

• All .scroll() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding on $(window) and overflow elements, eventData thresholds, triggering, migration from .scroll() to .on("scroll"), and throttling inside a legacy handler. Use the Try-it links to run each snippet in the browser. Remember: binding with .scroll(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( window ).scroll( function() {
  $( "#log" ).append( "Handler for scroll called. " );
} );

Scroll the page → log appends "Handler for scroll called."

May fire many times per second — throttle heavy work

Deprecated — prefer .on("scroll", fn) for new code

function check( threshold ) {
  var y = $( window ).scrollTop();
  $( "#status" ).text(
    y > threshold ? "Past " + threshold + "px — show back-to-top" : "Near top"
  );
}

$( window ).scroll( { threshold: 200 }, function( e ) {
  check( e.data.threshold );
} );
check( 200 );

Scroll past 200px → status shows "Past 200px — show back-to-top"

Scroll back to top → status shows "Near top"

eventData.threshold passed without a closure

Modern: .on("scroll", { threshold: 200 }, fn)

var count = 0;

$( "#target" ).scroll( function() {
  count++;
  $( "#log" ).text(
    "Handler called " + count + " time(s). scrollTop: " + $( this ).scrollTop() + "px"
  );
} );

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

Scroll #target container → count increments, log shows scrollTop

Click Trigger with .scroll() → $("#target").scroll() → same handler runs

No-arg .scroll() is trigger shorthand — prefer .trigger("scroll")

// Modern (recommended)
$( window ).on( "scroll", function() {
  $( "#log" ).append(
    "<div>.on('scroll') handler — scrollTop " + $( window ).scrollTop() + "px</div>"
  );
} );

// Legacy (deprecated): $( window ).scroll( function() { ... } );

$( "#go" ).on( "click", function() {
  $( window ).trigger( "scroll" );
} );

Click Run modern handler → .trigger("scroll") fires

Log appends ".on('scroll') handler — scrollTop 320px" (example)

Legacy .scroll(fn) would behave identically — only the API name differs

var raw = 0, throttled = 0, lastRun = 0, interval = 150;

$( window ).scroll( function() {
  raw++;
  $( "#raw" ).text( raw );
  var now = Date.now();
  if ( now - lastRun >= interval ) {
    lastRun = now;
    throttled++;
    var doc = $( document ).height() - $( window ).height();
    var pct = doc ? Math.round( $( window ).scrollTop() / doc * 100 ) : 0;
    $( "#throttled" ).text( throttled );
    $( "#bar" ).css( "width", pct + "%" ).text( pct + "%" );
  }
} );

Scroll quickly → Raw counter climbs fast

Throttled counter updates at most every 150ms

#bar width tracks scroll progress percentage

Same throttle pattern applies to .on("scroll", fn)

🚀 Common Use Cases

• Reading legacy code — recognize $(window).scroll(fn) as equivalent to .on("scroll", fn) in older infinite-scroll scripts.
• Page scroll indicators — legacy tutorials bind .scroll() on window to update progress bars and back-to-top buttons.
• Overflow container scroll — $("#chat").scroll(fn) reacts when a chat log or data table body scrolls.
• Programmatic trigger — $("#target").scroll() from a button — replace with .trigger("scroll").
• Shared eventData — $(window).scroll({ threshold: 300 }, fn) passes metadata without closures.
• Maintaining legacy admin UIs — many jQuery 1.x panels still use .scroll() — know how to migrate safely to jQuery 3.x.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .scroll(handler) or .scroll(eventData, handler) in new code. Use .on("scroll") instead. Unlike .error(), .scroll() is not removed in jQuery 3.x.
• Bind with .scroll(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .scroll() triggers the event since jQuery 1.0 — prefer .trigger("scroll").
• Bind on $(window) for page scroll or on overflow elements whose content exceeds their box.
• .scrollTop() gets or sets position — it is not the same as the .scroll() event shorthand.
• Never run heavy DOM work on every scroll event — throttle or debounce inside handlers.
• Remove handlers with .off("scroll") — not by calling .scroll(undefined).
• For the full modern scroll guide — throttling, progress bars, and .trigger("scroll") — see the jQuery scroll event tutorial.

💡 Best Practices