In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > scrollHeight

scrollHeight property

Browser support:

Returns the total height of an element's contents, in pixels. The value contains the height with the padding, but does not include the scrollBar, border, and the margin.

If the horizontal scrollbar is displayed, then the scrollHeight property returns the height of the contents with the height of the horizontal scrollbar in Opera.

If you need the height of the visible area for an object, use the clientHeight or offsetHeight property.
Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin.

You can set the height of an element with the height, pixelHeight and posHeight style properties. The value of the height in that case contains the height of the visible contents with the horizontal scrollbar, but without the padding, border and the margin. You can get the value of the height style property in different units with these properties, not the rendered height of the element.

Note that the scrollWidth and scrollHeight properties are special for the html element. They return the total size of the document, although if the height of the document is smaller than the height of the browser's client area, the html.scrollHeight property returns the height of the client area in Firefox.
If you need the size of the browser's client area, then use the clientWidth and clientHeight properties of the html element.

Be careful about the scrollHeight property of the html element!

In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.

What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the scrollHeight property works differently from version 8 than in earlier versions.

The height is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different.
From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the height is calculated in the current pixel size.

For example, if the zoom level is 200%, the scrollHeight property retrieves two times greater values before version 8 than from version 8 for the same document size.
If you need an example that shows how to get the zoom level, please see the page for the clientHeight property.

To get the width of the document or an element in the document, use the clientWidth, offsetWidth or the scrollWidth property.
If you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.

Syntax:

object.scrollHeight;

You can find the related objects in the Supported by objects section below.

This property is read-only.

If you want to add scrollbars to an HTML element, set its overflow style property to 'auto' or 'scroll'.
Note that neither the overflow style property nor the scrollHeight property work for HTML elements whose display type is inline. There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.). If you need to use the overflow style property or the scrollHeight property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the height, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scrollHeight property:

<head>
    <style>
        #container {
            width: 350px;
            height: 150px;
            margin: 10px;
            border: 2px solid red;
            padding: 0px;
            overflow: auto;
        }
        .inner {
            width: 1000px;
            height: 1000px;
        }
    </style>
    <script type="text/javascript">
        function GetContainerSize () {
            var container = document.getElementById ("container");
            
            var message = "The width of the contents width padding: " + container.scrollWidth + "px.\n";
            message += "The height of the contents width padding: " + container.scrollHeight + "px.\n";

            alert (message);
        }
    </script>
</head>
<body>
    <div id="container">
        <div class="inner" align="left">
            This element is inside the container.<br />
            The width and height of the element is 1000px<br />
            The container element has the following style definitions:<br />
            margin: 10px; border: 2px solid red; padding: 0px;
        </div>
    </div>
    <button onclick="GetContainerSize ();">Get the size of the container's content!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop properties and the onscroll event:

<head>
    <script type="text/javascript">
        function DisplayCurrentScroll () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[4].innerHTML = div.scrollLeft;
            info.rows[2].cells[4].innerHTML = div.scrollTop;
        }

        function DisplayInfo () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[1].innerHTML = div.scrollWidth;
            info.rows[2].cells[1].innerHTML = div.scrollHeight;
            info.rows[1].cells[2].innerHTML = div.clientWidth;
            info.rows[2].cells[2].innerHTML = div.clientHeight;
            info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
            info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;

            DisplayCurrentScroll ();
        }

        function OnScrollDiv () {
            DisplayCurrentScroll ();
        }
    </script>
</head>
<body onload="DisplayInfo ()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>