jQuery scroll Event

What Is scroll?

The scroll event is sent when the user scrolls to a different place in an element. Bind it with .on("scroll", handler) (since jQuery 1.7). It applies to window, scrollable frames, and overflow elements. Trigger it with .trigger("scroll").

$("#target").on("scroll", function () {
  // scroll position changed
});

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

$("#target").trigger("scroll"); // fire handlers programmatically

// Scroll fires often — throttle / debounce heavy work

How to Use scroll

Bind on the element that actually scrolls, keep the handler light, and throttle expensive work.

1. Attach with $("#el").on("scroll", handler) or $(window).on("scroll", handler).
2. Read position with .scrollTop() / .scrollLeft() inside the handler.
3. Throttle or debounce DOM-heavy work — scroll can fire dozens of times per second.
4. Call .trigger("scroll") when you need the same logic without a real scroll.
5. Remove with .off("scroll", handler) when cleaning up.

Pseudocode

bind scroll on target with handler(event)

when scroll position changes (wheel, bar, keys, touch):
    fire scroll on target
        for each registered handler:
            call handler(event)
            // may fire many times during one gesture

when your code needs the same logic:
    trigger scroll on target

for expensive work:
    on each scroll:
        if enough time passed since last run:
            update UI / measure
        else:
            skip this tick

Cheat Sheet

Keep these facts handy while wiring scroll-aware UI.

Live Preview

Scroll the box (or click Trigger) and watch the scroll handler update the log.

Ready — scroll the box or click Run.

jQuery Examples

Short, copy-ready snippets. Scroll the preview, or use Try It Yourself for a live editor.

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

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

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

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

Click Trigger →
#log shows "Handler for scroll called."
No real scrolling required

$(window).on("scroll", function () {
  $("#msg").text("Scroll happened!");
});

Scroll the page →
#msg shows "Scroll happened!"
Use for sticky headers, back-to-top, progress

$("#target").on("scroll", function () {
  var top = $(this).scrollTop();
  $("#pct").text("scrollTop: " + top + "px");
});

Scroll #target →
#pct shows "scrollTop: 42px" (value changes)

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

$("#target").on("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

Scroll handlers are fine when they stay light. Update visuals on a throttle; do expensive work after scrolling settles.

Key Takeaways