Skip to content
Related Articles

Related Articles

HTML | DOM scrollLeft Property

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Jul, 2022

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: 

html




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

Output: 

Before scrolling:

 scrollLeft 

After scrolling:

 scrollLeft 

Example-2: 

html




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

Output: 

Before clicking on button:

 scrollLeft 

After clicking on button:

 scrollLeft 

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

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 8
  • Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!