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
ThescrollLeft property sets or returns the number of pixelsan 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 »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 |
