jQuery scrollLeft() method

The scrollLeft() method is used to set or return the horizontal scrollbar position for the selected elements. When the scrollbar is on the left, it specifies the position 0.

To return the position: When we use the scrollLeft() method to get the position, it will return the current horizontal position of the first matched element in the set.

To set the position: When this method is used to set the position, it sets the horizontal position of the scrollbar for all matched elements.

Syntax

The scrollLeft() method accepts a parameter if we have to set the horizontal scrollbar position. Whereas, there is no parameter is required to get the position of the horizontal scrollbar.

To set horizontal scrollbar position:

To return horizontal scrollbar position:

The position parameter mentioned in the above syntax is an integer, used to specify the horizontal scrollbar position in pixels.

Now, let's see some of the illustrations to understand the use of the scrollLeft() method.

Example1

In this example, we are using the scrollLeft() method to get the position of the horizontal scrollbar.

<!DOCTYPE html>  
<html>  
<head>  
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        alert($("div").scrollLeft() + " px");  
    });  
});  
</script>  
<style>
div{
border: 2px solid black;
width: 100px;
height: 200px;
overflow: auto;
}
</style>
</head>  
<body>  
<h3> It is an example of using the scrollLeft() method. </h3>
<p> Move the scrollbar left and click the button again. </p>  
<div>  
Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</br>  
<button> Return the horizontal position of the scrollbar </button>  

</body>  
</html>

Test it Now

Output

After moving the scrollbar left and then clicking on the given button, an alert box will be displayed showing the current position of the horizontal scrollbar, as shown in the below screenshot -

Example2

In this example we are setting the position of the horizontal scrollbar by using the position parameter of the scrollLeft() method. When user will click the given button, the horizontal scrollbar will set to 100px left, and the current position will be displayed in an alert box.

<!DOCTYPE html>  
<html>  
<head>  
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
      $("div").scrollLeft(100);
	  alert($("div").scrollLeft());
    });  
});  
</script>  
<style>
div{
border: 2px solid black;
width: 100px;
height: 200px;
overflow: auto;
}
</style>
</head>  
<body>  
<h3> It is an example of using the scrollLeft() method. </h3>
<div>  
Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</br>  
<p> Click the below button to set the position of the horizontal scrollbar. </p>  
<button> Set the horizontal position of the scrollbar </button>  

</body>  
</html>

Test it Now

Output

After clicking the given button, the scrollbar is set to 100px left, and the position of the horizontal scrollbar will be displayed in the alert box, as shown in the following screenshots -