JavaScript Element scrollHeight Property

What You’ll Learn

Element.scrollHeight is a read-only instance property that measures the full height of an element’s content, including hidden overflow. Learn how it differs from clientHeight, how to detect vertical overflow, how to check whether a user scrolled to the bottom, and how to use it safely—with five examples and try-it labs.

Introduction

When a box has more content than fits in its visible area, the extra text is hidden behind a scrollbar. scrollHeight tells you how tall the full content is, not just the part you can currently see.

That makes it useful for chat windows, terms-and-conditions boxes, expandable panels, and any UI where you need to know whether content overflows or whether the user reached the end.

const box = document.getElementById("notes");
console.log(box.scrollHeight);

Understanding the Property

MDN: the read-only scrollHeight property is a measurement of the height 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 clientHeight.
• Excludes border and margin — and horizontal scrollbars.
• Equals clientHeight when content fits — no vertical overflow needed.

📝 Syntax

scrollHeight

Value

An integer representing the total content height in CSS pixels.

📋 MDN Scroll-to-Bottom Check

MDN recommends this threshold pattern because exact equality can fail when scrollTop contains decimals:

function isRead(element) {
  return (
    Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1
  );
}

Related learning: scrollTop, clientHeight, and overflow detection with scrollHeight > clientHeight.

Examples Gallery

Examples follow MDN Element: scrollHeight. Labs use scrollable boxes so you can compare visible height with full content height.

const box = document.getElementById("notes");
console.log(box.scrollHeight);

248

const box = document.getElementById("notes");
console.log({
  scrollHeight: box.scrollHeight,
  clientHeight: box.clientHeight
});

{
  "scrollHeight": 248,
  "clientHeight": 120
}

function isOverflowing(element) {
  return element.scrollHeight > element.clientHeight;
}

const box = document.getElementById("notes");
console.log(isOverflowing(box));

true

function isRead(element) {
  return (
    Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1
  );
}

const box = document.getElementById("terms");
box.scrollTop = box.scrollHeight;
console.log(isRead(box));

true

console.log({
  supported: "scrollHeight" 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 message list, feed, or panel has more content below.
• Checking whether a user scrolled through terms-and-conditions text.
• Auto-growing text areas or chat boxes based on content height.
• Comparing visible and full content height before showing a “scroll down” hint.
• Building scroll progress indicators with scrollTop and clientHeight.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns an integer, while scrollTop may contain decimals.
• Does not include border, margin, or a horizontal scrollbar.
• Related: clientHeight, offsetHeight, scrollTop, role, JavaScript hub.

💡 Best Practices