HTML DOM scrollLeft Property Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report HTML 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.scrollLeftIt is used to set the scrollLeft property.element.scrollLeft = valueWhere value specifies the number of pixels the element's content is scrolled horizontally. Note: Its value can't be negative.If the value specified is greater than the maximum scroll amount, the value is set to a maximum number.HTML DOM scrollLeft Property ExamplesExample: In this example, we will use the scrollLeft property. 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"> <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() { let doc = document .getElementById("div"); let x = doc.scrollLeft; document.getElementById("p") .innerHTML = "Horizontal scroll: " + x + "px"; } </script> </body> </html> Output: HTML DOM scroll left example Explanation: In this example we features a div element styled to have a fixed width with overflow set to auto for horizontal scrolling.Within the div, a child element is defined with content, stretching beyond the parent div's width.As the div is scrolled horizontally, the Geeks() function retrieves the scroll position using the scrollLeft property.The scroll position is displayed dynamically below the div, updating as the user scrolls horizontally.Example 2: In this example, we will use HTML DOM scrollLeft Property 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;"> <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() { let elmnt = document.getElementById("div"); elmnt.scrollLeft = 50; } </script> </body> </html> Output: HTML DOM scrollLeft Property example Explanation: In this example we are using a div element styled for vertical scrolling with fixed dimensions and overflow set to auto.Inside the div, a child element contains content extending beyond the parent's width.Upon button click, the Geeks() function sets the scrollLeft property of the div to 50, triggering horizontal scrolling.This demonstrates dynamic manipulation of scroll position using JavaScript.HTML DOM scrollLeft Property Use Cases1. How to Get and Set Scroll Position of an Element using JavaScript ?To get the scroll position of an element, use scrollLeft and scrollTop properties. To set scroll position, assign desired values to these properties dynamically via JavaScript. 2. How to get the position of scrollbar using JavaScript ?To get the position of the scrollbar in JavaScript, use the scrollLeft property for horizontal scroll position and the scrollTop property for vertical scroll position of an element. HTML DOM scrollLeft Property Supported BrowsersThe browser supported by the scrollLeft property are listed below: Google ChromeEdge Firefox OperaSafari Comment More infoAdvertise with us Next Article HTML DOM isEqualNode() Method V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies HTML Web technologies HTML-DOM HTML-Property +1 More Similar Reads HTML DOM isEqualNode() Method The HTML DOM isEqualNode() method checks whether the two nodes are equal or not. These nodes are considered equal if they are of the same type, having the same characteristics and the same attributes. The attributes do not have to be in the same order. Syntax: node.isEqualNode(othernode) Parameters: 2 min read HTML DOM clientWidth Property The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. This property only returns the actual width of an element that is viewable or visible to the user. It is a read-only propert 1 min read HTML DOM click() Method The click() method is used to simulate the mouse click on an element. This method works exactly the same as the element is manually clicked. Syntax: HTMLElementObject.click() Parameters: No parameters required. Return Value: No return value. Example: In this example, when the cursor goes over the ra 1 min read HTML DOM scrollTop Property The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element's content doesn't generate a scroll bar, then its scrollTop value is 0. Syntax: It returns the scrollTop property.element.scrollTopIt is used to set the scrollTop propertyelemen 2 min read HTML DOM isSameNode() Method The isSameNode() method checks whether the two nodes are the same or not. This method is different from isequalNode(), where two different nodes can be equal but not the same, here the same node means that they are referencing the same object. Syntax: node.isSameNode(othernode) Parameters: The "othe 1 min read HTML DOM console timeEnd() Method The console.timeEnd() method in HTML is used to end a timer started by the console.time() method. This can be used to calculate the time of certain operations for testing purposes. Syntax:console.timeEnd( label )Parameters: This method accepts single parameter label which is optional. It is used to 3 min read HTML DOM getAttributeNode() Method The getAttributeNode() method in HTML DOM is used to return the attribute node with the specified name of an element, as an attribute object. This function is similar to the getAttribute() method but the only difference is that the getAttribute() method returns the value of an attribute node, not an 2 min read HTML DOM scrollWidth Property The DOM scrollWidth property is used to return the width of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollWidth Return Value: It retu 1 min read HTML DOM cloneNode() Method The HTML DOM cloneNode() Method is used to copy or clone a node on which the cloneNode() method is called. For example, a list item can be copied from one list to another using this method.Syntax: yourNode.cloneNode([deep]) Parameters: The [deep] is an optional argument. We can set its value to "tru 3 min read HTML onunload Event Attribute The onunload event attribute works when the document is being unloaded i.e. it occurs when the browser has been closed. It is mostly used when the user opens a link and submits the form and closes the browser window. Basically, it is: Fired when a user navigates away from a page or closes the browse 1 min read Like