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

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

scrollX property (window)

Browser support:

Retrieves the number of pixels by which the contents of the document are scrolled to the left.

If you want to get the number of pixels by which the contents of the document are scrolled to the left:
- the pageXOffset property of the window object is supported in all browsers except in Internet Explorer before version 9, and always returns the scroll amount regardless of the doctype
- the scrollX property of the window object is supported by Firefox, Google Chrome and Safari, and always returns the scroll amount regardless of the doctype
- if no doctype is specified in the document, the scrollLeft property of the body element returns the scroll amount in Internet Explorer, Firefox, Opera, Google Chrome and Safari.
- if a doctype is specified in the document, the scrollLeft property of the html element returns the scroll amount in Internet Explorer, Firefox and Opera, but always returns zero in Google Chrome and Safari
- if no doctype is specified in the document, the scrollLeft property of the html element always returns zero
Conclusion: Try to use the pageXOffset property first and if it is not supported, then use the scrollLeft property of the html or the body element.
Values returned by the scrollLeft property of the html element require some correction in Internet Explorer earlier than version 8. For further details, please see the page for the scrollLeft property and Example 1 below.
If you want to get the number of pixels by which the contents of an element are scrolled to the left, use the scrollLeft property of the element.
If you want to scroll the contents of the document, use the scrollTo or scrollBy method.
If you want to scroll the contents of an element, use the scrollLeft and scrollTop properties.
If you want to scroll an element into the visible area, use the scrollIntoView method.

Syntax:

object.scrollX;

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

This property is read-only.

Possible values:

Integer that represents the distance, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example shows how to get the scroll positions of the document:

<html>
<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetScrollPositions () {
            if ('pageXOffset' in window) {  // all browsers, except IE before version 9
                var scrollLeft =  window.pageXOffset;
                var scrollTop = window.pageYOffset;
            }
            else {      // Internet Explorer before version 9
                var zoomFactor = GetZoomFactor ();
                var scrollLeft = Math.round (document.documentElement.scrollLeft / zoomFactor);
                var scrollTop = Math.round (document.documentElement.scrollTop / zoomFactor);
            }
            alert ("The current horizontal scroll amount: " + scrollLeft + "px");
            alert ("The current vertical scroll amount: " + scrollTop + "px");
        }
    </script>
</head>
<body>
    <div style="height:150px; width:600px; background-color:#e0a0a0;">
        Please scroll the window vertically and horizontally and click on the button.
    </div>

    <button onclick="GetScrollPositions ();">Get current scroll amounts</button>

    <div style="height:150px; width:600px; background-color:#e0a0a0;">
        Please scroll the window vertically and horizontally and click on the button.
    </div>
</body>
</html>