HTML DOM scrollLeft
Property
Example
Slide the scrollbar to get the distance of the element's scrollbar from the left or top of the element:
Definition and Usage
The scrollLeft
property gets or sets the distance of the element's scrollbar from the left side.
Note that if the element's content direction (direction) is rtl (right-to-left), the scrollbar will be on the far right (at the start of the content) and the scrollLeft
value will be 0. In this case, as you drag the scrollbar from right to left, scrollLeft
will change from 0 to a negative number.
On systems with display scaling, scrollLeft
may be a fractional number.
Browser Support
Property | |||||
---|---|---|---|---|---|
scrollLeft | Yes | Yes | Yes | Yes | Yes |
Syntax
Get the scrollLeft
property value:
// Get the distance of the scrollbar from the left side
var sLeft = element.scrollLeft;
sLeft
is an integer representing the number of pixels the element's scrollbar is from the left.
Set the scrollLeft
property value:
// Set the number of pixels the scrollbar has scrolled
element.scrollLeft = pixels;
scrollLeft
can be any integer, however:
- If the element cannot scroll (e.g., the element does not overflow), the value of
scrollLeft
is 0. - If the value set for
scrollLeft
is less than 0,scrollLeft
will be set to 0. - If the value set for
scrollLeft
exceeds the maximum width of the element's content,scrollLeft
will be set to the maximum width.
Technical Details
| Return Value: | Returns an integer representing the number of pixels the element's content has scrolled horizontally. | | --- | --- |
More Examples
Example
Set the element with ID "myDIV" to scroll 50 pixels horizontally and 10 pixels vertically:
const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;
Example
Set the element with ID "myDIV" to scroll 50 pixels horizontally and 10 pixels vertically each time the button is clicked:
var elmnt = document.getElementById("content");
function getFunction() {
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
}
function setFunction() {
elmnt.style.height = y.scrollHeight + "px";
elmnt.style.width = y.scrollWidth + "px";
}