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.scrollHeight
Return Value: It returns the height of the content of the element in pixels.
Example: In this example, we will use DOM scrollHeight property.
HTML
<!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>
<!-- script to find the scroll height -->
<script>
function Geeks() {
let doc = document.getElementById("content");
let x = doc.scrollHeight;
document.getElementById("p").innerHTML
= "Height: " + x + "px";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by the scrollHeight property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 5.0
- Firefox 21.0
- Opera 8.0
- Safari 1.0