HTML DOM Element scrollLeft property

Definition and usage

scrollLeft Sets or returns the number of pixels the element's content scrolls horizontally.

See also:

scrollTop property

CSS overflow property

onscroll event

Example

Example 1

Get the pixel number of the scrolling content of "myDIV":

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

Try it yourself

Example 2

Scroll the content of "myDIV" horizontally to 50 pixels and vertically to 10 pixels:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

Try it yourself

Example 3

Scroll the content of "myDIV" horizontally by 50 pixels and vertically by 10 pixels:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

Try it yourself

Example 4

Scroll the content of <body> horizontally by 30 pixels and vertically by 10 pixels:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

Try it yourself

Syntax

Return the scrollLeft property:

element.scrollLeft

Set the scrollLeft property:

element.scrollLeft = pixels

Attribute value

Value Description
pixels

The number of pixels the element's content scrolls horizontally.

  • If the number is negative, set this number to 0.
  • If the element cannot be scrolled, set this number to 0.
  • If the number is greater than the maximum allowed value, set the number to the maximum value.

Return value

Type Description
Number The number of pixels the element's content scrolls horizontally.

Browser support

All browsers support element.scrollLeft:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support