jQuery .scrollLeft() Method

What You’ll Learn

The .scrollLeft() method gets or sets the horizontal scroll offset of matched elements as a unitless pixel Integer — ideal for carousels, tab bars, and wide tables. This tutorial covers getter and setter overloads, comparisons with .scrollTop(), native element.scrollLeft, and .css(), scroll event handling, read-modify-write button patterns, and animated horizontal scrolling.

Introduction

After learning to position elements with .position() and .offset(), you often need to control what portion of wide content is visible inside a scrollable container. jQuery’s .scrollLeft() returns a plain integer you can read, increment, or pass directly to .animate() — without parsing CSS strings.

Available since jQuery 1.2.6, .scrollLeft() works as both a getter (no arguments) and a setter (pixel value). The getter reads the horizontal scroll offset of the first matched element — how many pixels of content are hidden to the left. The setter scrolls every element in the set to that position. It is the horizontal counterpart of .scrollTop().

Understanding the .scrollLeft() Method

Given a jQuery object, .scrollLeft() either returns the current horizontal scroll offset of the first matched element as a unitless pixel Integer (getter), or sets the scroll position on every matched element (setter). The value represents pixels of content hidden to the left of the visible area — 0 when flush left or when the element is not scrollable.

Think of .scrollLeft() as a horizontal window into overflowing content. .scrollTop() is the vertical twin. Native element.scrollLeft does the same at the DOM level; jQuery adds collection semantics and chaining. Use .css() for styling overflow — not for reading the current scroll offset.

📝 Syntax

jQuery .scrollLeft() has two argument forms — one getter and one setter:

Get — no arguments (since 1.2.6)

.scrollLeft()  // -> Integer

• Returns the horizontal scroll offset of the first matched element as a unitless pixel Integer.
• Reports pixels hidden to the left — 0 at the left edge or when not scrollable.
• Native equivalent: element.scrollLeft.

Set — Number (since 1.2.6)

.scrollLeft( value )  // -> jQuery

• value — horizontal scroll position in pixels (e.g. 300).
• Applied to every matched element in the set.
• Returns the original jQuery object for chaining — e.g. .scrollLeft(300).css("borderColor", "green").

Animate — smooth scroll (since 1.2.6)

.animate({ scrollLeft: value }, duration )

• Tweens the scroll offset over time — ideal for tab bars and carousels.
• Read current position with .scrollLeft(), compute target, then animate.
• Returns the jQuery object; use a completion callback for post-scroll actions.

Return value

• Getter — unitless Integer (pixels). May be 0 when not scrollable.
• Setter — the original jQuery object for chaining.

Important note

Official jQuery API example

var p = $( "p" ).first();
$( "p" ).last().text( "scrollLeft:" + p.scrollLeft() );

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 handle scroll events, read-modify-write buttons, and animated tab bars. Use DevTools or the Try-it links to run each snippet.

var p = $( "p" ).first();
$( "p" ).last().text( "scrollLeft:" + p.scrollLeft() );

scrollLeft:0 (at left edge on load)

After scrolling right manually -> scrollLeft:120 (example)

Getter returns Integer from first matched element only

$( "button" ).on( "click", function() {
  $( "div.demo" ).scrollLeft( 300 );
});

Click button -> div.demo jumps to scrollLeft 300

300px of content hidden to the left becomes visible on the right

Setter applies to every matched div.demo element

$( "#panel" ).on( "scroll", function() {
  $( "#out" ).text( "scrollLeft: " + $( this ).scrollLeft() );
});

On scroll -> "scrollLeft: 0" at left edge
Drag scrollbar right -> "scrollLeft: 85" (updates live)
At far right -> max scrollLeft (content width minus container width)

Use scroll event + .scrollLeft() getter for progress indicators

var step = 80;
$( "#left" ).on( "click", function() {
  var $el = $( "#track" );
  $el.scrollLeft( $el.scrollLeft() - step );
});
$( "#right" ).on( "click", function() {
  var $el = $( "#track" );
  $el.scrollLeft( $el.scrollLeft() + step );
});

Right click -> scrollLeft increases by 80px
Left click  -> scrollLeft decreases by 80px
At left edge -> scrollLeft stays 0 (cannot go negative)

Read current .scrollLeft(), add/subtract step, write back with setter

$( ".tab" ).on( "click", function() {
  var $bar = $( "#tabbar" );
  var $tab = $( this );
  var target = $tab.position().left + $bar.scrollLeft() - 20;
  $bar.animate({ scrollLeft: target }, 300 );
  $( ".tab" ).removeClass( "active" );
  $tab.addClass( "active" );
});

Click off-screen tab -> tab bar animates horizontally over 300ms
Active tab scrolls into view with 20px left padding
.scrollLeft() reads current offset; .position().left gives tab local X

Smooth carousel and tab-bar UX without CSS scroll-behavior

🚀 Common Use Cases

• Image carousels — .scrollLeft(current + slideWidth) or .animate({ scrollLeft: ... }) to advance slides.
• Overflowing tab bars — scroll the active tab into view on click (see Example 5).
• Wide data tables — sync a sticky header with body .scrollLeft() on horizontal scroll.
• Custom prev/next controls — read-modify-write with left/right buttons (see Example 4).
• Scroll progress indicators — scroll event + .scrollLeft() to update a horizontal progress bar.
• Timeline and kanban boards — programmatic scroll to a column: $board.scrollLeft(columnOffset).

📝 Notes

• Available since jQuery 1.2.6 — horizontal scroll counterpart of .scrollTop().
• Getter returns a unitless pixel Integer from the first matched element only.
• Setter applies to all matched elements and returns the jQuery object for chaining.
• Requires overflow-x: auto, scroll, or content wider than the container for meaningful values.
• Does not work on hidden (display:none) elements.
• 0 means at the left edge or not scrollable — check overflow before assuming.
• Animatable via .animate({ scrollLeft: value }, duration).
• Native equivalent: element.scrollLeft — jQuery adds collection semantics.

💡 Best Practices