Tutorialspoint.dev

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:

<!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>

/div>

Output:
Before click on the button:

Position returned shown by the arrow:

Example 2:

<!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>

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

After click on the button position shown by the arrow.



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter