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
<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:
After scrolling:
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:
After clicking on button:
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
.png)
