jQuery | scrollLeft() with Examples

The scrollLeft() method is an inbuilt method in jQuery which is used to return or set the horizontal position of the scroll bar.

Syntax:

$(selector).scrollLeft(position)

Parameters: This method accepts single parameter position which is optional. It is used to specify horizontal scrollbar position in pixels.

Return Value: This method returns the position of the scrollbar.

Below example illustrates the scrollLeft() method in jQuery.



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>scrollLeft method</title>
        <script src=
        </script>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    alert($("div").scrollLeft() + " px");
                });
            });
        </script>
        <style>
            div {
                border: 1px solid black;
                width: 140px;
                height: 120px;
                overflow: auto
            }
        </style>
    </head>
    <body>
        <div>
            welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome
            to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to 
            GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to 
            GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to GeeksforGeeks!.
        </div>
        <br>
        <!-- click on this button to get the position of the scrollbar -->
        <button>Click Here!</button>
       
    </body>
   
</html>

chevron_right


Output:
Before click on the button:

Position returned shown by the arrow:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>scrollLeft method</title>
        <script src=
        </script>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("div").scrollLeft(100);
                });
            });
        </script>
        <style>
            div {
                border: 1px solid black;
                width: 140px;
                height: 120px;
                overflow: auto
            }
        </style>
    </head>
    <body>
        <div style="">
            welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome
            to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to 
            GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to
            GeeksforGeeks!.
        </div>
        <br>
          
        <!-- click on this button to get the position
        of the scrollbar -->
        <button>Click Here!</button>
    </body>
</html>

chevron_right


Output:
Before click on the button position shown by the arrow.

After click on the button position shown by the arrow.

full-stack-img




My Personal Notes arrow_drop_up

Recommended Posts:

    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.