The DOM scrollHeight property is used to return the height of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property.Â
Syntax
element.scrollHeightReturn Value: It returns the height of the content of the element in pixels.Â
Example: In this example, we will use DOM scrollHeight property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM scrollHeight Property
</title>
<style>
#GFG {
width: 250px;
height: 100px;
overflow: auto;
margin: auto;
}
#content {
height: 300px;
padding: 10px;
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
DOM scrollHeight Property
</h2>
<button onclick="Geeks()">
Click me!
</button>
<br><br>
<div id="GFG">
<div id="content">
Text content...
</div>
</div>
<p id="p"></p>
<!--Driver Code Ends-->
<script>
function Geeks() {
let doc = document.getElementById("content");
let x = doc.scrollHeight;
document.getElementById("p").innerHTML
= "Height: " + x + "px";
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It measures the full height of an elementâs content, including content that is hidden due to overflow (i.e., the minimum height needed to fit all content without a vertical scrollbar). It includes padding but excludes border, margin, and any horizontal scrollbar. When no overflow exists, scrollHeight equals clientHeight.
- It is commonly used with scrollTop and clientHeight to detect if an element is fully scrolled (e.g., to the bottom). Because scrollTop is not rounded while scrollHeight and clientHeight are, a small threshold (like 1px) is usually needed for a reliable âreached the endâ check.
