Easy Tutorial
❮ Dom Obj Option Prop Number Disabled ❯

HTML DOM scrollLeft Property

Element Object

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:

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";
}

Element Object

❮ Dom Obj Option Prop Number Disabled ❯