HTML DOM Element scrollLeft
Example
Get the number of pixels the content of "myDIV" is scrolled:
const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;
Try it Yourself »
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;
Scroll the contents of "myDIV" TO 50 pixels horizontally and 10 pixels vertically:
const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;
Try it Yourself »
element.scrollLeft = 50;
element.scrollTop = 10;
Scroll the contents of "myDIV" BY 50 pixels horizontally and 10 pixels vertically:
const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;
Try it Yourself »
element.scrollLeft += 50;
element.scrollTop += 10;
More examples below.
Description
The scrollLeft property sets or returns the number of pixels
an element's content is scrolled horizontally.
Syntax
Return the scrollLeft property:
element.scrollLeft
Set the scrollLeft property:
element.scrollLeft = pixels
Property Values
Value
Description
pixels
The number of pixels the element's content is scrolled horizontally.
If the number is negative, the number is set to 0.
If the element cannot be scrolled, the number is set to 0.
If the number is greater than maximum allowed, the number is set to the maximum.
If the number is negative, the number is set to 0.
If the element cannot be scrolled, the number is set to 0.
If the number is greater than maximum allowed, the number is set to the maximum.
Return Value
Type
Description
Number The number of pixels the element's content is scrolled horizontally.
More Examples
Example
Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:
const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;
Try it Yourself »
html.scrollLeft += 30;
html.scrollTop += 10;
Browser Support
element.scrollLeft is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |