Open In App

HTML DOM scrollHeight Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 30 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads