HTML | DOM scrollLeft Property

The DOM scrollLeft property is used to return or set the number of pixels an element i.e. scrolled horizontally. If the content of the element doesn’t generate a scroll bar, then its scrollLeft value is 0;

Syntax:

  • It returns the scrollLeft property.
    element.scrollLeft
  • It is used to set the scrollLeft property.
    element.scrollLeft = value

Where value specifies the number of pixels the element’s content is scrolled horizontally.
Note:

  • It’s value can’t be negative.
  • If value specified is greater than maximum scroll amount, then the value is set to maximum number.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>HTML DOM scrollLeft Property</title>
    <style>
        #div {
            width: 400px;
            overflow: auto;
            margin: auto;
        }
          
        #ele {
            width: 600px;
            background-color: green;
            color: white;
        }
    </style>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
  
    <h2>
            DOM scrollLeft Property
        </h2>
  
    <div id="div" onscroll="Geeks()">
        <div id="ele">
            <p>GeeksforGeeks</p>
            <p>A computer science portal for geeks.</p>
        </div>
    </div>
  
    <p id="p"></p>
  
    <script>
        function Geeks() {
            var doc = document.getElementById("div");
            var x = doc.scrollLeft;
            document.getElementById("p").innerHTML =
                "Horizontal scroll: " + x + "px";
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before scrolling:
scrollLeft

After scrolling:
scrollLeft

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>HTML DOM scrollLeft Property</title>
    <style>
        #div {
            height: 100px;
            width: 250px;
            overflow: auto;
            margin: auto;
        }
          
        #ele {
            height: 300px;
            Width: 400;
            background-color: green;
            color: white;
        }
    </style>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
  
    <h2>
            DOM scrollLeft Property
        </h2>
  
    <button onclick="Geeks()">Scroll Div</button>
    <br>
    <br>
  
    <div id="div" onscroll="Geeks()">
        <div id="ele">
            <p>GeeksforGeeks</p>
            <p>A computer science portal for geeks.</p>
        </div>
    </div>
  
    <script>
        function Geeks() {
            var elmnt = document.getElementById("div");
            elmnt.scrollLeft = 50;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking on button:
scrollLeft

After clicking on button:
scrollLeft

Supported Browsers: The browser supported by scrollLeft property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.