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.scrollLeft- It 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 Examples
Example: In this example, we will use the scrollLeft property.
<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>
<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 Cases
1. 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 Browsers
The browser supported by the scrollLeft property are listed below: