.scrollLeft()S2C Home « Attributes & Properties « .scrollLeft()

• <<    .position()
• .scrollTop()     >>

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

Parameters

Return

Retrieving - A Number object (an integer).

Setting - A jQuery object.

.scrollLeft() ExampleTop

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 ) ExampleTop

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.');  
  });
});

• <<    .position()
• .scrollTop()     >>