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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > scrollMaxX (window)

scrollMaxX property (window)

Browser support:

Returns the maximum number of pixels by which the contents of the document can be scrolled horizontally.

The returned value is the difference between the total (scrollWidth) and the visible (clientWidth) width of the contents of the document.

You can get the number of pixels by which the contents of the document are scrolled to left with the pageXOffset, scrollX and scrollLeft properties.

To scroll the contents of the document, use the scrollTo or scrollBy method.

Syntax:

object.scrollMaxX;

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

This property is read-only.

Possible values:

Integer that represents the maximum amount, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scrollMaxX property:

<head>
    <script type="text/javascript">
        function GetScrollMax () {
            if ('scrollMaxX' in window) {
                alert ("The maximum horizontal scroll amount: " + window.scrollMaxX);
                alert ("The maximum vertical scroll amount: " + window.scrollMaxY);
            }
            else {
                var maxX = document.documentElement.scrollWidth - document.documentElement.clientWidth;
                var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;

                alert ("The maximum horizontal scroll amount: " + maxX);
                alert ("The maximum vertical scroll amount: " + maxY);
            }
        }
        function GetScrollPositions () {
            if ('pageXOffset' in window) {  // all browsers, except IE before version 9
                alert ("The current horizontal scroll amount: " + window.pageXOffset);
                alert ("The current vertical scroll amount: " + window.pageYOffset);
            }
            else {      // Internet Explorer before version 9
                alert ("The current horizontal scroll amount: " + document.documentElement.scrollLeft);
                alert ("The current vertical scroll amount: " + document.documentElement.scrollTop);
            }
        }
    </script>
</head>
<body>
    <div style="height:150px; width:600px">You can get the maximum and the current scroll amounts with the buttons.</div>

    <button onclick="GetScrollMax ();">Get the maximum scroll amounts!</button>
    <br />
    <button onclick="GetScrollPositions ();">Get the current scroll amounts</button>

    <div style="height:150px; width:600px">You can get the maximum and the current scroll amounts with the buttons.</div>
</body>