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

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

scrollWidth property

Browser support:

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

Note that if the horizontal scrollbar is displayed, a blank area appears on the right side of the element's contents in Opera. The width of the blank area is equal to the width of the element's left border. It is a bug in Opera. The scrollWidth property is consequent to that behavior, it includes the width of both the contents and the left border in Opera.

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

You can set the width of an element with the width, pixelWidth and posWidth style properties. The value of the width in that case contains the width of the visible contents with the vertical scrollbar, but without the padding, border and the margin. You can get the value of the width 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 scrollWidth property of the html element!
In Internet Explorer earlier than version 8, it retrieves the width in physical pixel size, while from version 8, it returns the width 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 scrollWidth property works differently from version 8 than in earlier versions. The width 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 width is calculated in the current pixel size.
For example, if the zoom level is 200%, the scrollWidth 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 clientWidth property.

To get the height of the document or an element in the document, use the clientHeight, offsetHeight or the scrollHeight property.
If you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.

Syntax:

object.scrollWidth;

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 scrollWidth 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 scrollWidth property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the width, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scrollWidth 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>