JavaScript Element scrollLeftMax Property

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

Definition

Element.scrollLeftMax is a read-only number: the maximum left scroll offset possible for the element (MDN). Where supported, it is the largest value scrollLeft can normally reach.

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

Syntax

Use el.scrollLeftMax. Start with this line.

JavaScript
element.scrollLeftMax
CallWhat it does
element.scrollLeftMaxPrimary signature.

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

Library declarations
JavaScript
element.scrollLeftMax

Parameters

ParameterDescription
Scroll containerRequired. Element that can scroll horizontally
scrollWidth / clientWidthRequired. Standard way to compute the max
scrollLeftMaxOptional. Firefox helper — feature-detect only

Return Value

Return ValueDescription
*Number (max left scroll offset)

JavaScript Examples

Example 1 — Portable Max

Compute the maximum horizontal offset with standard properties.

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

const maxLeft = box.scrollWidth - box.clientWidth;
console.log(maxLeft);  // e.g. 200
Try It Yourself

How It Works

  1. Full width. scrollWidth is the content width including overflow.
  2. Visible width. clientWidth is the inner viewport of the box.
  3. Subtract. The difference is how far you can scroll horizontally.
  4. Portable. Works in modern browsers without scrollLeftMax.

Example 2 — Feature-Detect

Read the non-standard property only when it exists.

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

const supported = "scrollLeftMax" in box;
const maxLeft = supported
  ? box.scrollLeftMax
  : box.scrollWidth - box.clientWidth;

console.log(supported, maxLeft);
Try It Yourself

How It Works

  1. Check first. "scrollLeftMax" in box avoids relying on a missing API.
  2. Native path. If present (often Firefox), use the read-only helper.
  3. Fallback. Otherwise use scrollWidth - clientWidth.
  4. Same goal. Both paths aim for the maximum horizontal offset.

Example 3 — Scroll to End

Jump to the maximum horizontal position using the portable max.

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

const maxLeft = box.scrollWidth - box.clientWidth;
box.scrollLeft = maxLeft;

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

How It Works

  1. Compute the max. Use the portable width difference.
  2. Assign. Set scrollLeft to that value.
  3. Result. The box jumps near the right end of the content.
  4. Note. You assign to scrollLeft, never to scrollLeftMax.
Compatibility

Browser Support

Element.scrollLeftMax is marked Non-standard on MDN and is not part of any specification. Support is limited (mainly Firefox). Prefer scrollWidth - clientWidth for portable code.

✓ Non-standard · Limited

Element.scrollLeftMax

Read-only maximum horizontal scroll offset — Firefox-oriented, not for production cross-browser use.

Limited Non-standard
Mozilla Firefox Supported (non-standard)
Yes
Google Chrome Not available — use scrollWidth - clientWidth
No
Microsoft Edge Not available — use scrollWidth - clientWidth
No
Apple Safari Not available — use scrollWidth - clientWidth
No
Opera Not available — use scrollWidth - clientWidth
No
Internet Explorer Not available
No
scrollLeftMax Limited

Bottom line: Feature-detect if you inspect scrollLeftMax in Firefox. For shipping UI, use scrollWidth - clientWidth.

Frequently Asked Questions

Where supported, it returns a read-only number: the maximum left scroll offset possible for the element — the largest value scrollLeft can normally reach.
MDN marks Element.scrollLeftMax as Non-standard. It is not part of any specification. It is not labeled Deprecated or Experimental, but MDN does not recommend non-standard features for production.
Support is limited — mainly Firefox. Chrome, Safari, and Edge typically do not expose scrollLeftMax.
Prefer the portable calculation element.scrollWidth - element.clientWidth for the maximum horizontal scroll offset across browsers.
No. It is read-only. Read the maximum, then assign to scrollLeft if you want to move the scrollbar.
scrollLeft is the current horizontal offset and is writable. scrollLeftMax is the maximum possible offset and is read-only (where supported).

Next: scrollTop

Learn how to get and set an element’s vertical scroll offset.

scrollTop 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 scrollLeft Property JavaScript Element scrollTop Property