HTML DOM Element scrollHeight Property

Definition and Usage

scrollHeight The property returns the height of the element in pixels, including padding, but not including borders, scrollbars, or margins.

scrollHeight The property is read-only.

Note:scrollWidth and scrollHeight Both return the entire height and width of the element, including the invisible parts (due to overflow).

See also:

scrollWidth property

CSS overflow Property

Instance

Example 1

Get the height and width of the element, including padding:

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

Try it yourself

Example 2

How padding, border, and scrollbar affect scrollWidth and scrollHeight:

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

Try it yourself

Example 3

Set the height and width of the element to the values returned by scrollHeight and scrollWidth:

element.style.height = element.scrollHeight + "px";
element.style.width = element.scrollWidth + "px";

Try it yourself

Syntax

element.scrollHeight

Return value

Type Description
Number The height of the element, in pixels.

Browser support

All browsers support element.scrollHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support