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

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

scrollLeft property

Browser support:

Sets or retrieves the number of pixels by which the contents of an object 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.
Be careful about the scrollLeft property of the html element!
In Internet Explorer earlier than version 8, it retrieves the scroll amount in physical pixel size, while from version 8, it returns the amount 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 scrollLeft property works differently from version 8 than in earlier versions.
- The scroll amount 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 scroll amount is calculated in the current pixel size.
For example, if the zoom level is 200%, the scrollLeft property retrieves two times greater values before version 8 than from version 8 for the same scroll position.
See Example 4, it implements a possible solution for that problem.
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 (see Example 2).
If you want to scroll an element into the visible area, use the scrollIntoView method.

Syntax:

object.scrollLeft;

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

This property is read/write.

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

Possible values:

Integer that specifies or retrieves the distance, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example displays the number of pixels by which the contents of an object are scrolled:

<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        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 />
    Current scroll amounts:
    <div id="info"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it displays detailed information:

<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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to scroll the contents of an element:

<head>
    <script type="text/javascript">
        function Scroll () {
            var myCont = document.getElementById ("container");
            myCont.scrollLeft = 10;
            myCont.scrollTop = 40;
        }
    </script>
</head>
<body>
    <div id="container" style="overflow:scroll;width:150px;height:100px; white-space:nowrap background-color:#e0f0e0;">
            Start <br />
            2. line with a long content <br />
            3. line with a long content <br />
            4. line with a long content <br />
            5. line with a long content <br />
            6. line with a long content <br />
            7. line with a long content <br />
            end
    </div>
    <br /><br />
    <button onclick="Scroll ();">Scroll the element above!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

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>