Skip to content
Related Articles

Related Articles

HTML | DOM scrollHeight Property
  • Last Updated : 26 Jul, 2019

The DOM scrollHeight property is used to return the height of an element. This property includes padding and also the content that is not visible on the screen due to overflow but not include border, scrollbar or margin. It is a read-only property.

Syntax:

element.scrollHeight

Return Value: It returns the height of the content of element in pixels.

Example:




<!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>
          
        <!-- script to find the scroll height -->
        <script>
            function Geeks() {
                var doc = document.getElementById("content");
                var x = doc.scrollHeight;
                document.getElementById ("p").innerHTML
                        = "Height: " + x + "px";
            }
        </script>
    </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>
    </body>
</html>                    

Output:
Before click on the button:
scrollHeight
After click on the button:
scrollHeight
Supported Browsers: The browser supported by scrollHeight property are listed below:

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Firefox 3.0
  • Opera
  • Safari 4.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :