How to use scrollLeft?

Posted on 2007-10-19
Last Modified: 2008-01-09

I must misunderstand something. I thought the following code will move the elements in body by 1000 and will show the number 1000:
document.body.scrollLeft=1000;   //Why nothing happened with this
alert(document.body.scrollLeft;     //Why this is zero?
Question by:johnwood
    LVL 82

    Expert Comment

    Furthermore, I believe it works only for IE.
    More info here:

    LVL 28

    Accepted Solution

    Hi, first, use document.documentElement.scrollLeft.
    Then, make the body wide enough. You can only set the scrollLeft property to a value that is smaller than or equal to the total width of the body tag minus the horizontal resolution in px. Try this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
      body {width:3000px; height:600px; border:2px solid #c00; }
    function test() {
    <body onClick="test();">
      Click somewhere inside the red border...
    LVL 28

    Expert Comment


    will not work as a way of accessing the body element. It should be
    so "document." instead of "document.all" and there should be a (plural) "s" - "Elements"...

    Author Comment

    Thank you hielo and TName!

    I have just tried your code and it worked. However, if I delete the first line
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    it would not work anymore!!! Very strange!!!
    LVL 28

    Expert Comment

    That's due to the fact that IE will behave differently in this respect if in strict vs. quirks mode. Have a look e.g. here:

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Suggested Solutions

    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now