Open In App
Related Articles

HTML DOM scrollLeft Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The 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.

Example 1: 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;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        DOM scrollLeft Property
    </h2>
    <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: 

 

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;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        DOM scrollLeft Property
    </h2>
    <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: 

 

Supported Browsers: The browser supported by the scrollLeft property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 8
  • Safari 1


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads