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:
After scrolling:
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:
After clicking on button:
Supported Browsers: The browser supported by scrollLeft property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Recommended Posts:
- HTML | DOM id Property
- HTML | DOM dir Property
- HTML | DOM name Property
- HTML | DOM li value Property
- HTML | DOM specified Property
- HTML | DOM URL Property
- HTML | DOM value Property
- HTML | DOM Bdo dir Property
- HTML | DOM Map name Property
- HTML | DOM offsetTop Property
- HTML | DOM Meter low Property
- HTML | DOM strictErrorChecking Property
- HTML | DOM Option value Property
- HTML | DOM tabIndex Property
- HTML | DOM classList Property
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.