Skip to content
Related Articles

Related Articles

HTML | DOM scrollHeight Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022

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. 



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



<!DOCTYPE html>
        HTML DOM scrollHeight Property
        #GFG {
            width: 250px;
            height: 100px;
            overflow: auto;
            margin: auto;
        #content {
            height: 300px;
            padding: 10px;
            background-color: green;
            color: white;
    <!-- script to find the scroll height -->
        function Geeks() {
            var doc = document.getElementById("content");
            var x = doc.scrollHeight;
                = "Height: " + x + "px";
<body style="text-align: center;">
    <h1 style="color:green;">
        DOM scrollHeight Property
    <button onclick="Geeks()">
        Click me!
    <div id="GFG">
        <div id="content">
            Text content...
    <p id="p"></p>


Before click on the button:


After click on the button:


Supported Browsers: The browser supported by 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!