jQuery .scroll() Method

What Is .scroll()?

.scroll() is jQuery’s legacy shorthand (since 1.0) for binding or triggering the browser scroll event on window or a scrollable element. It is deprecated since 3.3 but still works in jQuery 3.x. Prefer .on("scroll") / .trigger("scroll").

// Deprecated (since 3.3) — still works in jQuery 3.x
$("#target").scroll(function () {
  // scroll position changed
});

$("#target").scroll(); // trigger

// Modern replacements
$("#target").on("scroll", handler);
$("#target").trigger("scroll");

How to Use .scroll()

Recognize the legacy call, bind the element that scrolls, and migrate to .on() / .trigger().

1. Bind with $("#el").scroll(handler) (legacy) or .on("scroll", handler) (preferred).
2. Optionally pass eventData: .scroll(data, handler) → .on("scroll", data, handler).
3. Trigger with no-arg .scroll() (legacy) or .trigger("scroll") (preferred).
4. Throttle expensive work — scroll can fire dozens of times per second.
5. Remove with .off("scroll", handler) — not .unbind().

Pseudocode

call $("#el").scroll(handler)
    → internally: $("#el").on("scroll", handler)

call $("#el").scroll()
    → internally: $("#el").trigger("scroll")

when scroll position changes:
    fire scroll on target
        for each registered handler:
            call handler(event)

to migrate:
    .scroll(fn)      → .on("scroll", fn)
    .scroll(data, fn) → .on("scroll", data, fn)
    .scroll()        → .trigger("scroll")

Cheat Sheet

Quick map from the deprecated shorthand to modern APIs.

Live Preview

Run the legacy .scroll() shorthand (still available in jQuery 3.x) and watch the handler update the log.

Ready — scroll the box or click Run.

jQuery Examples

Short, copy-ready snippets using the legacy shorthand. Prefer .on("scroll") for new projects.

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

Scroll #target →
#log gains "Handler for scroll called. "
May append many times during one gesture

$("#target").scroll({ label: "panel" }, function (event) {
  $("#out").text(
    event.data.label + ": " + $(this).scrollTop() + "px"
  );
});

Scroll → "panel: 42px"
event.data.label carries the context string

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

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

Click #run → .scroll() fires the event
Bound handler runs without a real scroll

// Legacy — deprecated since jQuery 3.3
$("#target").scroll(function () {
  $("#out").text("Legacy: .scroll(function(){ ... }).");
});

// Modern — use for new code
$("#target").on("scroll", function () {
  $("#out").text("Modern: .on('scroll', function(){ ... }).");
});

Both handlers fire on scroll
Behavior is identical — only the API name differs
Prefer .on("scroll") for new code

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

$("#target").scroll(function () {
  raw++;
  $("#raw").text(raw);

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

Fast scroll →
Raw count climbs quickly
Throttled count grows slower (~every 150ms)

Performance Notes

Legacy and modern binds have the same cost. Keep handlers light, and throttle anything that measures or redraws the DOM.

Key Takeaways