jQuery scrollLeft() Method

What Is scrollLeft()?

.scrollLeft() gets or sets the horizontal scroll position (since jQuery 1.2.6). The value is how many pixels of content are hidden to the left of the visible area — a unitless integer.

// Getter — first matched element only
$("div").scrollLeft()      // e.g. 0, 120, 300

// Setter — every matched element
$("div").scrollLeft(300)

// Animate
$("div").animate({ scrollLeft: 300 }, 400)

How to Use scrollLeft()

Ensure the element can scroll horizontally, then get or set the offset.

1. Use a visible container with overflow that allows horizontal scrolling.
2. Make sure content is wider than the visible width.
3. Call .scrollLeft() to read, or .scrollLeft(n) to jump.
4. Optional: animate with .animate({ scrollLeft: n }).

Pseudocode

if called with no args:
    return firstElement.scrollLeft   // pixels hidden on the left

if called with value:
    for each matched element:
        element.scrollLeft = value

// At far left or not scrollable → 0
// Hidden (display:none) → unreliable — show first

Cheat Sheet

Keep these facts handy for horizontal scroll.

Live Preview

A small overflow box with wide content. Get, set, nudge, or reset scrollLeft and read the integer result.

$box.scrollLeft()
→ 0

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// Overflow box with wide inner content (set up via .css in Try It)
var left = $("#box").scrollLeft();
console.log(left); // 0 at the far left

0

$("#box").scrollLeft(300);
console.log($("#box").scrollLeft()); // 300

300

var $box = $("#box");
var step = 50;

$box.scrollLeft($box.scrollLeft() + step); // right
console.log($box.scrollLeft());

$box.scrollLeft($box.scrollLeft() - step); // left
console.log($box.scrollLeft());

50
0

$("#box").scrollLeft(0);
$("#box").animate({ scrollLeft: 200 }, 200, function () {
  console.log($("#box").scrollLeft()); // ~200
});

200

Performance Notes

Prefer instantaneous sets for frequent updates (drag). Use short animations for intentional navigation. Avoid reading scroll position inside tight loops without need.

Key Takeaways