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 Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 13/05/2021
2287 People Used
Only 92 Left
Rating
5.0