JavaScript Element scrollLeftMax Property

What You’ll Learn

Element.scrollLeftMax is a read-only instance property that returns the maximum left scroll offset possible for an element. Learn what it means, why it is non-standard, how to feature-detect it, and how to replace it with a portable calculation—with five examples and try-it labs.

Introduction

scrollLeft tells you where a box is scrolled horizontally. Sometimes you also need the maximum possible value—for example, to jump to the far right or to compute scroll progress.

Firefox exposes that maximum as scrollLeftMax. Because it is non-standard, this tutorial teaches both the Firefox property and the cross-browser formula you should prefer in real projects.

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

// Non-standard (mainly Firefox):
console.log(box.scrollLeftMax);

// Portable alternative:
console.log(box.scrollWidth - box.clientWidth);

Understanding the Property

MDN: the read-only scrollLeftMax property returns a number representing the maximum left scroll offset possible for the element.

• Read-only — inspect the maximum; do not assign to it.
• Number — pixel value for the farthest horizontal scroll position.
• Non-standard — not in any public web specification.
• Limited support — mainly Firefox; feature-detect before using.

📝 Syntax

scrollLeftMax

Value

A number representing the maximum horizontal scroll offset in CSS pixels (where supported).

📋 Portable Maximum Scroll Pattern

MDN documents scrollLeftMax but notes it is non-standard. For real projects, calculate the maximum with standard properties:

function getScrollLeftMax(element) {
  if ("scrollLeftMax" in element) {
    return element.scrollLeftMax;
  }
  return element.scrollWidth - element.clientWidth;
}

Related learning: scrollLeft, scrollWidth, clientWidth, and scrollTopMax (also non-standard).

Examples Gallery

Examples follow MDN Element: scrollLeftMax and focus on feature detection plus the portable alternative so labs work outside Firefox too.

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

false

const box = document.getElementById("container");
const maxLeft = box.scrollWidth - box.clientWidth;
console.log(maxLeft);

240

const box = document.getElementById("container");
const portable = box.scrollWidth - box.clientWidth;
const native = "scrollLeftMax" in box ? box.scrollLeftMax : null;
console.log({ portable, native });

{
  "portable": 240,
  "native": null
}

const box = document.getElementById("container");
const maxLeft = box.scrollWidth - box.clientWidth;
box.scrollLeft = maxLeft;
console.log(box.scrollLeft);

240

console.log({
  supported: "scrollLeftMax" in Element.prototype,
  access: "read-only",
  status: "Non-standard (MDN)",
  prefer: "scrollWidth - clientWidth"
});

{
  "supported": false,
  "access": "read-only",
  "status": "Non-standard (MDN)",
  "prefer": "scrollWidth - clientWidth"
}

🚀 Common Use Cases

• Finding the farthest horizontal scroll position for a carousel or strip.
• Jumping to the end of a horizontally scrollable table or timeline.
• Building scroll progress percentages with current scrollLeft.
• Understanding Firefox-only DOM helpers when reading older code.
• Teaching the difference between current scroll position and maximum scroll range.

🔧 How It Works

📝 Notes

• MDN marks scrollLeftMax as Non-standard.
• Not labeled Deprecated or Experimental on the MDN page.
• Not part of any official specification.
• Related: scrollLeft, scrollHeight, scrollTopMax, scrollWidth, JavaScript hub.

💡 Best Practices