jQuery scrollLeft() Method

Last Updated : 31 Jul, 2024

The scrollLeft() method is an inbuilt method in jQuery 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.

The below example illustrates the scrollLeft() method in jQuery.

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <title>scrollLeft method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>
    <center>
        <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>
    </center>

</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>scrollLeft method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>
    <center>
        <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>
    </center>

</body>

</html>