HTML DOM scrollLeft Property

HTML DOM scrollLeft property is used to return or set the number of pixels an element i.e. scrolled horizontally. If the content of the element doesn’t generate a scroll bar, then its scrollLeft value is 0;

Syntax:

It returns the scrollLeft property.

element.scrollLeft

It is used to set the scrollLeft property.

element.scrollLeft = value

Where value specifies the number of pixels the element’s content is scrolled horizontally.

Note:

Its value can’t be negative.
If the value specified is greater than the maximum scroll amount, the value is set to a maximum number.

HTML DOM scrollLeft Property Examples

Example: In this example, we will use the scrollLeft property.

HTML

<html>
    <head>
        <title>
            HTML DOM scrollLeft Property
        </title>
        <style>
            #div {
                width: 400px;
                overflow: auto;
                margin: auto;
            }
 
            #ele {
                width: 600px;
                background-color: green;
                color: white;
            }
        </style>
    </head>
 
    <body style="text-align: center">
        <div id="div" onscroll="Beginner()">
            <div id="ele">
                <p>w3wiki</p>
                <p>
                    A computer science portal for
                    Beginner.
                </p>
            </div>
        </div>
        <p id="p"></p>
 
        <script>
            function Beginner() {
                let doc = document
                    .getElementById("div");
                let x = doc.scrollLeft;
                document.getElementById("p")
                  .innerHTML =
                    "Horizontal scroll: " +
                    x + "px";
            }
        </script>
    </body>
</html>

Output:

HTML DOM scroll left example

Explanation:

In this example we features a div element styled to have a fixed width with overflow set to auto for horizontal scrolling.
Within the div, a child element is defined with content, stretching beyond the parent div’s width.
As the div is scrolled horizontally, the Beginner() function retrieves the scroll position using the scrollLeft property.
The scroll position is displayed dynamically below the div, updating as the user scrolls horizontally.

Example 2: In this example, we will use HTML DOM scrollLeft Property

HTML

<html>
   
<head>
    <title>HTML DOM scrollLeft Property</title>
    <style>
        #div {
            height: 100px;
            width: 250px;
            overflow: auto;
            margin: auto;
        }
        #ele {
            height: 300px;
            Width: 400;
            background-color: green;
            color: white;
        }
    </style>
</head>
   
<body style="text-align: center;">
    <button onclick="Beginner()">Scroll Div</button>
    <br>
    <br>
    <div id="div" onscroll="Beginner()">
        <div id="ele">
            <p>w3wiki</p>
            <p>A computer science portal for Beginner.</p>
        </div>
    </div>
   
    <script>
        function Beginner() {
            let elmnt = document.getElementById("div");
            elmnt.scrollLeft = 50;
        }
    </script>
</body>
   
</html>

Output:

HTML DOM scrollLeft Property example

Explanation:

In this example we are using a div element styled for vertical scrolling with fixed dimensions and overflow set to auto.
Inside the div, a child element contains content extending beyond the parent’s width.
Upon button click, the Beginner() function sets the scrollLeft property of the div to 50, triggering horizontal scrolling.
This demonstrates dynamic manipulation of scroll position using JavaScript.

HTML DOM scrollLeft Property Use Cases

1. How to Get and Set Scroll Position of an Element using JavaScript ?

To get the scroll position of an element, use scrollLeft and scrollTop properties. To set scroll position, assign desired values to these properties dynamically via JavaScript.

2. How to get the position of scrollbar using JavaScript ?

To get the position of the scrollbar in JavaScript, use the scrollLeft property for horizontal scroll position and the scrollTop property for vertical scroll position of an element.

HTML DOM scrollLeft Property Supported Browsers

The browser supported by the scrollLeft property are listed below:

Tags:

#HTML-DOM #HTML-Property #Web technologies #HTML #Web Technologies

HTML DOM button Object

HTML DOM scrollHeight Property

HTML DOM scrollLeft Property

HTML DOM scrollLeft Property Examples

HTML

HTML

HTML DOM scrollLeft Property Use Cases

1. How to Get and Set Scroll Position of an Element using JavaScript ?

2. How to get the position of scrollbar using JavaScript ?

HTML DOM scrollLeft Property Supported Browsers

Contact Us