JavaScript Element scrollWidth Property

What You’ll Learn

Element.scrollWidth is a read-only instance property that measures the full width of an element’s content, including hidden overflow. Learn how it differs from clientWidth, how to detect horizontal overflow, and how it pairs with scrollLeft—with five examples and try-it labs.

Introduction

When a box has more content than fits in its visible width, the extra content is hidden behind a horizontal scrollbar. scrollWidth tells you how wide the full content is, not just the part you can currently see.

That makes it useful for carousels, tab strips, wide tables, and any UI where you need to know whether content overflows sideways or how far scrollLeft can move.

const box = document.getElementById("strip");
console.log(box.scrollWidth);

Understanding the Property

MDN: the read-only scrollWidth property is a measurement of the width of an element’s content, including content not visible on the screen due to overflow.

• Read-only — use it to measure, not assign.
• Includes padding — measured like clientWidth.
• Excludes border and margin — and vertical scrollbars.
• Equals clientWidth when content fits — no horizontal overflow needed.

📝 Syntax

scrollWidth

Value

An integer representing the total content width in CSS pixels.

📋 Overflow & Max Scroll Pattern

Detect horizontal overflow, then compute the maximum scroll offset:

function isOverflowingX(element) {
  return element.scrollWidth > element.clientWidth;
}

const maxLeft = box.scrollWidth - box.clientWidth;

Related learning: scrollHeight, scrollLeft, and clientWidth.

Examples Gallery

Examples follow MDN Element: scrollWidth. Labs use horizontally scrollable boxes so you can compare visible width with full content width.

const box = document.getElementById("strip");
console.log(box.scrollWidth);

420

const box = document.getElementById("strip");
console.log({
  scrollWidth: box.scrollWidth,
  clientWidth: box.clientWidth
});

{
  "scrollWidth": 420,
  "clientWidth": 180
}

function isOverflowingX(element) {
  return element.scrollWidth > element.clientWidth;
}

const box = document.getElementById("strip");
console.log(isOverflowingX(box));

true

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

240

console.log({
  supported: "scrollWidth" in Element.prototype,
  returns: "integer pixels",
  includes: "padding and hidden overflow",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "integer pixels",
  "includes": "padding and hidden overflow",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Detecting whether a carousel, tab bar, or table overflows horizontally.
• Computing the maximum scrollLeft for custom next/previous controls.
• Showing a “scroll sideways” hint when content is wider than the box.
• Building horizontal scroll progress indicators.
• Comparing visible and full content width after layout changes.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns an integer, while scrollLeft may contain decimals.
• Does not include border, margin, or a vertical scrollbar.
• Related: scrollHeight, scrollLeft, clientWidth, scrollTopMax, JavaScript hub.

💡 Best Practices