What is the DOM scrollHeight property?

Overview

DOM scrollHeight is an HTML property that returns the scroll height of the element.

The scroll height refers to the entire height of that element in the HTML page, even if it is not viewable due to overflow property.

The element’s scroll height includes the height assigned in CSS property plus the padding, but it does not include the margin, border, or scrollbar.

Example

You can find the scroll height of the div element in the example below.

Code explanation

• Lines 5-9: We have CSS properties for id elem, where we define the background-color, padding, and height.

• Line 14: We have a paragraph p tag to display text.

• Line 16: We add a button tag that has a change() function bound with the onclick event.

• Line 18: A div element has an ID, elem, that will be used to get the element object.

• Lines 23-27: In the script tag, we write the JavaScript code and define a change() function that will be called by the click on a button from the HTML page. We use document.getElementById() to get the desired element of DOM, and then we apply scrollHeight, which will return the scroll height of the element. We then print the value returned by scrollHeight on the console.

Output

We have successfully retrieved the scroll height of a div element. The console prints the total height, 5020px. The height also includes the padding, so the width of div(5000px) + top and bottom padding(10px + 10px = 20px) is 5020px. Remember that scroll height does not include the border, scrollbar, or margin.