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.
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
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
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
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