Open In App

HTML DOM scrollLeft Property

Improve
Improve
Like Article
Like
Save
Share
Report

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="Geeks()">
            <div id="ele">
                <p>GeeksforGeeks</p>
                <p>
                    A computer science portal for
                    geeks.
                </p>
            </div>
        </div>
        <p id="p"></p>
 
        <script>
            function Geeks() {
                let doc = document
                    .getElementById("div");
                let x = doc.scrollLeft;
                document.getElementById("p")
                  .innerHTML =
                    "Horizontal scroll: " +
                    x + "px";
            }
        </script>
    </body>
</html>


Output: 

HTML-DOM-scrollLeft-Property

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 Geeks() 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="Geeks()">Scroll Div</button>
    <br>
    <br>
    <div id="div" onscroll="Geeks()">
        <div id="ele">
            <p>GeeksforGeeks</p>
            <p>A computer science portal for geeks.</p>
        </div>
    </div>
   
    <script>
        function Geeks() {
            let elmnt = document.getElementById("div");
            elmnt.scrollLeft = 50;
        }
    </script>
</body>
   
</html>


Output: 

HTML-DOM-scrollLeft-Property-example

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 Geeks() 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:



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads