JavaScript Element scrollWidth Property

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

Definition

Element.scrollWidth is a read-only integer: the width of an element’s content, including parts hidden by overflow. It is the minimum width needed to show everything without a horizontal scrollbar (MDN).

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

Syntax

Use el.scrollWidth. Start with this line.

JavaScript
element.scrollWidth
CallWhat it does
element.scrollWidthPrimary signature.

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

Library declarations
JavaScript
element.scrollWidth

Parameters

ParameterDescription
clientWidth / scrollLeftOptional. Overflow and scroll-position checks

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read scrollWidth

Measure the full content width of a narrow box with wide text.

JavaScript
const box = document.getElementById("box");
// width: 120px; overflow-x: auto; long nowrap text

console.log(box.scrollWidth);  // e.g. 320  (full content width)
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the element.
  2. Read the property. scrollWidth is the full content width in CSS pixels.
  3. Include overflow. Hidden parts of the line still count toward the total.
  4. Result. A value ≥ clientWidth (larger when content overflows).

Example 2 — Detect Overflow

Compare scrollWidth with clientWidth to see if content is wider than the visible area.

JavaScript
const box = document.getElementById("box");
// width: 100px; overflow: hidden; white-space: nowrap

const overflows = box.scrollWidth > box.clientWidth;
console.log(overflows);  // true
Try It Yourself

How It Works

  1. Visible width. clientWidth is the inner viewport of the box.
  2. Full width. scrollWidth is everything inside, including overflow.
  3. Compare. If scroll is larger than client, content overflows horizontally.
  4. Use case. Show a fade, enable “expand”, or decide if a scrollbar is needed.

Example 3 — Max scrollLeft

Use the portable max horizontal scroll from width measurements.

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

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

console.log(maxLeft);  // e.g. 200
Try It Yourself

How It Works

  1. Full minus visible. scrollWidth - clientWidth is the scrollable range.
  2. Assign. Set scrollLeft to that max to jump to the end.
  3. Portable. Prefer this over non-standard scrollLeftMax.
  4. Read-only note. You never assign to scrollWidth itself.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.scrollWidth

Read-only content width including overflow — 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
scrollWidth Excellent

Bottom line: Safe for production. Compare with clientWidth for overflow detection, and use scrollWidth - clientWidth for max scrollLeft.

Frequently Asked Questions

A read-only integer: the full width of an element's content in CSS pixels, including content not visible because of overflow. It is the minimum width needed to fit all content without a horizontal scrollbar.
No. MDN marks Element.scrollWidth as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
clientWidth is the visible inner width. scrollWidth is the full content width. When content fits without overflow, they are usually equal; when content overflows, scrollWidth is larger.
Yes. Like clientWidth, scrollWidth includes padding but not border, margin, or a vertical scrollbar (MDN).
Compare the two: if element.scrollWidth > element.clientWidth, the content is overflowing horizontally.
Use element.scrollWidth - element.clientWidth. That is the portable maximum for scrollLeft.

Next: shadowRoot

Learn how to access an element’s open shadow root from JavaScript.

shadowRoot 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 scrollTopMax Property JavaScript Element shadowRoot Property