scrollLeft() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:scrollLeft

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. scrollLeft

Description

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

When the scrollbar is on the end of left side, the position is 0.

Parameter

Parameter Description
position Specifies the horizontal scrollbar position in pixels

The following code shows how to Return the horizontal scrollbar position for a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        console.log($("div").scrollLeft() + " px");
    });//from  w  w w.  j  a  v a  2s  .  c  o m
});
</script>
</head>
<body>

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.
</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>

Related Tutorials