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().

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0