HTML DOM scrollHeight Property

元素对象参考手册Element Object

Examples

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

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

Try it Yourself »

Definition and Usage

The scrollHeight property is a read-only property that returns the pixel height of the element. The height includes padding, but does not include margin or border. It is an integer, and the unit is pixels (px).

The value of scrollHeight is equal to the minimum height the element requires to fit all content in the viewport without using a scrollbar. When there is no vertical scrollbar, the scrollHeight value is the same as clientHeight, the minimum value required for the element view to fill all content. It includes the element's padding, but does not include the element's border and margin.

scrollHeight also includes pseudo-elements such as ::before and ::after.

This is a read-only property.

Browser Support

Property
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

Use padding, border, scrollbar, and margin to demonstrate changes in the scrollWidth and scrollHeight properties:

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

Try it Yourself »

Example

Return the values of an element's scrollHeight and scrollWidth properties, then use the obtained height and width to set the scrollHeight and scrollWidth property values 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"; }

Try it Yourself »

元素对象参考手册Element Object

Other Extensions