.scrollLeft()
JQ Home <<
A & P <<
.scrollLeft()
First element horizontal scroll bar position retrieval and matched set horizontal scroll bar position setting.
Description
The .scrollLeft()
method is used to retrieve the current horizontal position of the scroll bar for the first element within the matched set or set the current horizontal position of the scroll bar for each element within the matched set.
- The horizontal scroll position equates to the number of pixels that are hidden from view to the left of the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be 0.
- This method will not work if the element(s) it is being applied to are hidden and being called directly, or animated as a property, using
.animate()
.
Syntax
Signature | Description |
---|---|
.scrollLeft() | Retrieve the current horizontal position of the scroll bar for the first element within the matched set. |
.scrollLeft( value ) | Set the current horizontal position of the scroll bar of each element within the matched set. |
Parameters
Parameter | Description | Type |
---|---|---|
value | An integer representing the new horizontal position of the scroll bar to set. | Number |
Return
Retrieving - A Number
object (an integer).
Setting - A jQuery
object.
.scrollLeft()
Example
A & P << Top
Retrieve the current horizontal position of the scroll bar for the first element within the matched set.
In the example below when we press the button we get the current horizontal position of the scroll bar within the 'iframe' below. Scroll the horizontal scroll bar and press the button again to see the position change.
$(function(){
$('#btn13').click(function(){
alert($('#ourIframe').contents()
.scrollLeft() + ' is the current horizontal scroll position.');
});
});
.scrollLeft( value )
Example
A & P << Top
Set the current horizontal position of the scroll bar of each element within the matched set.
In the example below when we press the button we set the current horizontal position of the scroll bar within the 'iframe' below to 100 pixels. Scroll the horizontal scroll bar and press the button again to see the position change.
$(function(){
$('#btn14').click(function(){
alert($('#ourIframe2').contents()
.scrollLeft( 100 )
+ ' current horizontal scroll position set to 100 pixels.');
});
});
Related Tutorials
jQuery Basic Tutorials - Lesson 11 - Working With Dimension & Position CSS Properties