JavaScript Element scrollLeft Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word SCROLLLEFT

Definition

Element.scrollLeft gets or sets how far an element’s content is scrolled horizontally from its left edge, in CSS pixels. A positive value means the content has moved to the right (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.scrollLeft. Start with this line.

JavaScript
element.scrollLeft
CallWhat it does
element.scrollLeftPrimary signature.

Built into the browser. Read or assign el.scrollLeft — no import required.

Library declarations
JavaScript
element.scrollLeft

Parameters

ParameterDescription
Scroll containerRequired. Element that can scroll horizontally
Number assignmentOptional. Programmatic horizontal scroll

Return Value

Return ValueDescription
*The current value of el.scrollLeft.

JavaScript Examples

Example 1 — Read scrollLeft

Check the current horizontal scroll offset.

JavaScript
const box = document.getElementById("box");
// narrow box + wide content; not scrolled yet

console.log(box.scrollLeft);  // 0
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the scroll container.
  2. Read the property. scrollLeft is the horizontal offset in CSS pixels.
  3. Start position. Before any horizontal scroll, it is usually 0.
  4. Later. After the user or script scrolls right, the value increases.

Example 2 — Slide Right

Increase scrollLeft to reveal more content on the right.

JavaScript
const box = document.getElementById("box");

box.scrollLeft += 40;
console.log(box.scrollLeft);  // e.g. 40
Try It Yourself

How It Works

  1. Writable property. Assigning to scrollLeft scrolls the element.
  2. Add pixels. += 40 moves the view about 40px to the right.
  3. Same as auto scroll. MDN: like Element.scroll() with behavior: "auto".
  4. Read back. The new offset is available immediately on the next read.

Example 3 — Reset to Start

Set scrollLeft back to 0 to return to the left edge.

JavaScript
const box = document.getElementById("box");

box.scrollLeft = 80;  // scroll away
box.scrollLeft = 0;   // back to start
console.log(box.scrollLeft);  // 0
Try It Yourself

How It Works

  1. Jump away. scrollLeft = 80 moves to offset 80.
  2. Reset. Assigning 0 returns to the usual LTR start.
  3. Confirm. Reading again shows 0.
  4. Tip. For animated scroll, prefer element.scroll() with behavior: "smooth".
Compatibility

Browser Support

Element.scrollLeft is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.scrollLeft

Get or set horizontal scroll offset in CSS pixels — long-standing CSSOM View support.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
scrollLeft Excellent

Bottom line: Safe for production. Remember subpixel values, RTL sign differences, and Safari overscroll behavior when writing edge checks.

Frequently Asked Questions

It gets or sets how many pixels the element's content is scrolled horizontally from its left edge. A positive value means the content has been scrolled to the right.
No. MDN marks Element.scrollLeft as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
Yes. Modern browsers can return subpixel-precise floating-point values, so scrollLeft is not always a whole number.
It is usually 0 when the element has not been scrolled horizontally. If the document is not the active document, the returned value is 0.
Yes, in some layouts (for example RTL where content grows left). scrollLeft can be 0 at the start and increasingly negative as you scroll toward the end.
scrollLeft is the current horizontal scroll offset. scrollWidth is the total width of the scrollable content.

Next: scrollLeftMax

Learn the maximum horizontal scroll offset for an element.

scrollLeftMax tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element scrollHeight Property JavaScript Element scrollLeftMax Property