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
scrollLeftis 0. - If the value set for
scrollLeftis less than 0,scrollLeftwill be set to 0. - If the value set for
scrollLeftexceeds the maximum width of the element's content,scrollLeftwill 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";
}