In this section, we will learn what the Element scrollLeft property is and how to use it in JavaScript.

What is Element scrollLeft Property in JavaScript?

The JavaScript Element scrollLeft property is used to set or get the number of pixels an element is scrolled horizontally.

Note: if you want to have a horizontal scroll-bar appear on an element, fix the width of that element, put the `overflow` property to `auto` and set the width of its child element to a value greater than the width of the parent element.

Element scrollLeft Property Syntax:

element.scrollLeft;

element.scrollLeft = newValue;

Element scrollLeft Property Input Value

The value we set for this property is an integer value which represents the number of pixels the target element should scroll horizontally.

Element scrollLeft Property Return Value

The return value of this method is the current number of pixels that the element scrolled horizontally.

Example: using scrollLeft Property in JavaScript

See the Pen using scrollLeft Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.