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

Press the button below to action the above code:

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

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 11 - Working With Dimension & Position CSS Properties