Description:
Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be 0.
Examples
Example 1
Get the scrollLeft of a paragraph.Full source:
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
</script>
</body>
</html>
Description:
Set the current horizontal position of the scroll bar for each of the set of matched elements.
The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollLeft positions the horizontal scroll of each matched element.
Examples
Example 1
Set the scrollLeft of a div.
$("div.demo").scrollLeft(300);
Full source:
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div.demo").scrollLeft(300);
});
</script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
</body>
</html>
Was this information helpful?
