jQuery scrollLeft()

Introduction

Return the horizontal scrollbar position for a <div> element:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//  w w  w . j  a v a2s  . co m
<script>
$(document).ready(function(){
  $("button").click(function(){
    document.getElementById("demo").innerHTML = 
               $("div").scrollLeft() + " px";
  });
});
</script>
</head>
<body>

<p id="demo"></p>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div><br>

<button>Return the horizontal position of the scrollbar</button>
<p>Move the scrollbar to the right and click the button again.</p>

</body>
</html>

The scrollLeft() method sets or gets the horizontal scrollbar position for the selected elements.

As getter, this method returns the horizontal position of the scrollbar for the first matched element.

As setter, this method sets the horizontal position of the scrollbar for all matched elements.

Return horizontal scrollbar position:

$(selector).scrollLeft()

Set horizontal scrollbar position:

$(selector).scrollLeft(position)

Parameter	Description
position	Specifies the horizontal scrollbar position in pixels

Previous Next