HTML DOM scrollLeft property

HTML DOM Element Object

scrollLeftThe property sets or returns the number of pixels the element content scrolls to the left (horizontal direction).

Note:If the element'sdirection(direction)Isrtl(from right to left), then when the scrollbar is at its farthest right position (at the beginning of the scrolling content), scrollLeft is0and then scrolling to the end of the content, scrollLeft gradually becomes negative.

UsingscrollTopThe property can set or return the number of pixels the element content (vertical) scrolls to the top.

Syntax:

Return the scrollLeft property:

element.scrollLeft

Set the scrollLeft property:

element.scrollLeft = pixels

var elem = document.getElementById("container");
var x = elem.scrollLeft;
var y = elem.scrollTop;

Browser compatibility

All browsers fully support the scrollLeft property:

Attribute Value

Technical Details

More Examples

Scroll the content of the DIV horizontally20 pixels:

document.getElementById('container').scrollLeft　+=　20;

Scroll the content of the BODY horizontally100 pixels:

var body = document.body;//　For Safari
var html = document.documentElement;　//　Chrome, Firefox, IE and Opera
　　　
body.scrollLeft　+=　100;
html.scrollLeft　+=　100;

Related References

HTML DOM Reference:scrollTop property

HTML DOM Element Object