Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

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

Reading time 1 min
Published Jan 23, 2018
Updated Sep 27, 2019

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:

Example
$("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().