JavaScript Element scrollLeft Property

What You’ll Learn

Element.scrollLeft is an instance property that gets or sets how far an element’s content is scrolled horizontally. Learn how to read the current position, move content to the right, assign a specific value, and understand subpixel and RTL behavior—with five examples and try-it labs.

Introduction

When a box has more content than fits horizontally, the user can scroll sideways. The scrollLeft property tells you how many pixels the content has moved from the left edge, and you can also change that value from JavaScript.

It is useful for image carousels, tab strips, horizontally scrollable tables, and any UI where you need to move content left or right programmatically.

const box = document.getElementById("container");
console.log(box.scrollLeft); // 0 at the start
box.scrollLeft += 20;

Understanding the Property

MDN: the scrollLeft property gets or sets the number of pixels by which an element’s content is scrolled from its left edge. This value is subpixel precise in modern browsers.

• Readable and writable — inspect or control horizontal scroll position.
• Starts at 0 — when the element has not been scrolled horizontally.
• Positive means scrolled right — revealing more content to the right.
• Can be decimal — subpixel precision is possible on modern devices.

📝 Syntax

element.scrollLeft
element.scrollLeft = 100
element.scrollLeft += 20

Value

A double-precision floating-point number representing horizontal scroll offset in CSS pixels.

📋 MDN Slide-Right Example Shape

MDN increments scrollLeft when a button is clicked to move content to the right:

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

Related learning: scrollWidth, clientWidth, and element.scroll().

Examples Gallery

Examples follow MDN Element: scrollLeft. Labs use horizontally scrollable boxes so you can read and change the scroll position.

const box = document.getElementById("container");
console.log(box.scrollLeft);

0

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

20

const box = document.getElementById("container");
box.scrollLeft = 80;
console.log(box.scrollLeft);

80

const box = document.getElementById("container");
box.scrollLeft = 100;
box.scrollLeft = 0;
console.log(box.scrollLeft);

0

console.log({
  supported: "scrollLeft" in Element.prototype,
  access: "read and write",
  precision: "subpixel possible",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "access": "read and write",
  "precision": "subpixel possible",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Moving a carousel or image strip to the next item.
• Scrolling a tab bar so the active tab becomes visible.
• Building custom previous/next buttons for horizontal content.
• Resetting a horizontally scrollable panel back to the start.
• Tracking how far the user has scrolled sideways in a container.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values can be decimal because of subpixel precision.
• In RTL layouts, behavior may differ and values can become negative.
• Related: scrollWidth, clientWidth, scrollHeight, scroll(), JavaScript hub.

💡 Best Practices