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 »
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 »
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 »
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. |
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 »
Browser Support
element.scrollLeft
is supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |