JavaScript Element scrollHeight Property

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

Definition

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

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

Syntax

Use el.scrollHeight. Start with this line.

JavaScript
element.scrollHeight
CallWhat it does
element.scrollHeightPrimary signature.

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

Library declarations
JavaScript
element.scrollHeight

Parameters

ParameterDescription
clientHeight / scrollTopOptional. Overflow and scroll-position checks

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read scrollHeight

Measure the full content height of a scrollable box.

JavaScript
const box = document.getElementById("box");
// height: 80px; overflow: auto; several lines of content

console.log(box.scrollHeight);  // e.g. 180  (full content height)
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the element.
  2. Read the property. scrollHeight is the full content height in CSS pixels.
  3. Include overflow. Hidden lines still count toward the total.
  4. Result. A value ≥ clientHeight (larger when content overflows).

Example 2 — Detect Overflow

Compare scrollHeight with clientHeight to see if content is taller than the visible area.

JavaScript
const box = document.getElementById("box");
// height: 40px; overflow: auto; many lines

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

How It Works

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

Example 3 — Scrolled to Bottom

Use a threshold check — scrollTop can be fractional while heights are rounded.

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

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

console.log(atBottom(box));  // true when scrolled to the end
Try It Yourself

How It Works

  1. Three numbers. Content height, visible height, and current scroll offset.
  2. Remaining distance. Roughly scrollHeight − clientHeight − scrollTop.
  3. Threshold. MDN recommends ≤ 1 because rounding / subpixels differ.
  4. Use case. Unlock an “I agree” checkbox after the user reads to the end.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.scrollHeight

Read-only content height 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
scrollHeight Excellent

Bottom line: Safe for production. Prefer a threshold when checking scroll-to-bottom, and compare with clientHeight for overflow detection.

Frequently Asked Questions

A read-only integer: the full height of an element's content in CSS pixels, including content not visible because of overflow. It is the minimum height needed to fit all content without a vertical scrollbar.
No. MDN marks Element.scrollHeight as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
clientHeight is the visible inner height. scrollHeight is the full content height. When content fits without overflow, they are usually equal; when content overflows, scrollHeight is larger.
Yes. Like clientHeight, scrollHeight includes padding but not border, margin, or a horizontal scrollbar (MDN).
Compare the two: if element.scrollHeight > element.clientHeight, the content is overflowing vertically.
Use a small threshold because scrollTop can be fractional: Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1.

Next: scrollLeft

Learn how to read and set an element’s horizontal scroll offset.

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