Easy Tutorial
❮ Jsref Substr Prop Style Outlinecolor ❯

HTML DOM scrollHeight Property

Element Object

Example

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


Definition and Usage

The scrollHeight property is a read-only property that returns the pixel height of the element, including padding but excluding margin and border. It returns an integer in pixels.

The value of scrollHeight is equal to the minimum height the element would require to fit all content in the viewport without using a vertical scrollbar. Without a vertical scrollbar, the scrollHeight value is the same as the minimum height required to fit all content (clientHeight), including the element's padding but not its border and margin.

The scrollHeight also includes pseudo-elements like ::before and ::after.

This is a read-only property.


Browser Support

Property Chrome Edge Firefox Safari Opera
scrollHeight Yes Yes Yes Yes Yes

Syntax

element.scrollHeight

Technical Details

| Return Value: | Returns an integer representing the pixel height of the element. | | --- | --- |


More Examples

Example

Demonstrate the changes in scrollWidth and scrollHeight properties using padding, border, scrollbar, and margin:

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;

Example

Return the values of the scrollHeight and scrollWidth properties of an element, then use these values to set the scrollHeight and scrollWidth properties of another element:

var elmnt = document.getElementById("content");

function getFunction() {
  var x = elmnt.scrollWidth;
  var y = elmnt.scrollHeight;
}

function setFunction() {
  elmnt.style.height = y.scrollHeight + "px";
  elmnt.style.width = y.scrollWidth + "px";
}

Element Object

❮ Jsref Substr Prop Style Outlinecolor ❯