jQuery scrollLeft() Method

Quiz

The scrollLeft() method in jQuery is used to get or set the horizontal scroll position of an element.

To get the scroll position, this method returns the horizontal scrollbar position of the first matched element.

To set the scroll position, this method sets the horizontal scrollbar position for all matched elements.

Note: When the scrollbar is at the extreme left, the position is 0.

Syntax

We have two different syntaxes to set and get the scrollbar position −

Following is the syntax to get the horizontal scrollbar position:

$(selector).scrollLeft()

Following is the syntax to set the horizontal scrollbar position:

$(selector).scrollLeft(position)

Parameters

This method accepts the following parameters. The same are described below −

selector: Specifies the element(s) to manipulate.
position: Specifies the horizontal scroll position to set in pixels.

Example 1

In the following example, we are using the scrollLeft() method to get the scrollbar position for a <div> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var scrollLeft = $("#scrollableDiv").scrollLeft();
                alert("Horizontal scroll position: " + scrollLeft + "px");
            });
        });
    </script>
    <style>
        #scrollableDiv {
            width: 300px;
            height: 100px;
            overflow: auto;
            white-space: nowrap;
            border: 1px solid black;
        }
        .content {
            width: 800px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div id="scrollableDiv">
    <div class="content">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
</div>
<p> Right-scroll the content inside the div and click the button below.</p>
<br>
<button>Get Scroll Left</button>
</body>
</html>

If we right-scroll the content inside the div and click the button, it gives the scrollbar position.

Example 2

In this example, we are setting the horizontal scrollbar position for a div element using the scrollLeft() method −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#scrollableDiv").scrollLeft(200); // Sets the horizontal scroll position to 200px
            });
        });
    </script>
    <style>
        #scrollableDiv {
            width: 300px;
            height: 100px;
            overflow: auto;
            white-space: nowrap;
            border: 1px solid black;
        }
        .content {
            width: 800px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="scrollableDiv">
    <div class="content">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
</div>
<br>
<button>Set Scroll Left to 200px</button>
</body>
</html>

After executing the program, right-slide the content inside the div and click on the button below, it will then set the scroll bar position to 200px.

jquery_ref_html.htm

Print Page