The Horizontal Position of the Scroll Bar: jQuery .scrollLeft()

jQuery scrollLeft: Main Tips

• The jQuery .scrollLeft() returns the horizontal position of the scroll bar of the first element from targeted HTML elements.
• It also can make jQuery set scroll position for every detected element.

Using .scrollLeft()

The .scrollLeft() method sets or returns the position of the horizontal scroll bar of the selected elements. The following example returns the jQuery horizontal scroll bar position:

$("button").click(() => {
    alert($("div").scrollLeft());
});

Note: in cases when elements are not scrollable or the scroll bar is at the very left, the .scrollLeft() jQuery returns 0.

Here is the syntax of jQuery .scrollLeft() used to return the scrollbar position:

$(selector).scrollLeft();

This syntax applies to make jQuery set scroll position:

$(selector).scrollLeft(scrollPosition);

Tip: get the vertical scroll bar position instead of horizontal by using .scrollTop().