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:

<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> 
  
<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
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: