How to use scrollLeft () Method and scrollLeft (position) using function method in JQuery

In this article, I will explain use of scrollLeft () Method and how to use scrollLeft(position) method in JQuery.
  • 1805

Introduction

  • scrollLeft() method sets or returns the offset (horizontal) position of the scrollbar of the first matched elements.
  • The horizontal position of the scrollbar is the number of pixels. When the scrollbar is on the far left side, the position is 0.

JQuery CSS scrollLeft() method

scrollLeft() method returns the horizontal position of the scrollbar

Syntax

$(selector).scrollLeft()

Example

The following example shows how to scrollLeft() method in jquery.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").click(function () {

            alert("Scroll Position "+$("div").scrollLeft()+ "px");

        });

    });

</script>

</head>

<body>

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">

Contains all of the letters in the alphabet:The quick brown fox jumps over the lazy dog.

</div>

<button>Click for display the horizontal position of the scrollbar</button>

<p>Move the scrollbar to the right and click the button again.</p>

</body>

</html>

 

Output

 

 scrool simple.jpg

JQuery CSS scrollLeft(position) method

scrollLeft(position) method sets the horizontal position of the scrollbar.

Syntax

$(selector).scrollLeft(position)

Example

The following example shows how to scrollLeft(position) method in jquery.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").click(function () {

            $("div").scrollLeft(10);

        });

    });

</script>

</head>

<body>

<h2>ScrollLeft Example</h2>

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">

The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.

</div>

<button>Click for set the horizontal position of the scrollbar to 10px</button>

</body>

</html>

 

Output

 

 scroll postion.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2013 dotNetheaven. All rights reserved.