In this section, we will learn what the Element scrollHeight property is and how to use it in JavaScript.

What is Element scrollHeight Property in JavaScript?

The JavaScript Element scrollHeight property is used to get the height of the content of an element in pixels.

This height includes the padding but not border, horizontal scroll-bar (if any), and the margin.

Note that we’re saying height of the entire content of an element! That means even the part of an element that is not viewable will be counted as part of the height.

Element scrollHeight Property Syntax:

element.scrollHeight;

Element scrollHeight Property Input Value

The scrollHeight property is read-only and so we can’t assign a value to it.

Element scrollHeight Property Return Value

The return value of this property, as mentioned before, is the entire height of an element, including padding but not border, horizontal scroll-bar, and the margin of that element.

Example: using scrollHeight Property in JavaScript

See the Pen using scrollHeight Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.