Skip to content
Related Articles

Related Articles

HTML | DOM scrollWidth Property
  • Last Updated : 26 Jul, 2019

The DOM scrollWidth property is used to return the width of an element. This property includes padding and also the content that is not visible on the screen due to overflow but not include border, scrollbar or margin. It is a read-only property.

Syntax:

element.scrollWidth

Return Value: It returns the width of the content of element in pixels.

Example:




<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM scrollWidth Property
        </title>
        <style>
            #box {
                width: 250px;
                overflow: auto;
            }
              
            #content {
                width: 500px;
                padding: 10px;
                background-color: green;
                color: white;
            }
        </style>
          
        <!-- script to find width of scroll -->
        <script>
            function Geeks() {
                var doc = document.getElementById("content");
                var x = doc.scrollWidth;
                document.getElementById ("p").innerHTML 
                        = "Width: " + x + "px";
            }
        </script>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
          
        <h2>
            DOM scrollWidth Property
        </h2>
          
        <button onclick="Geeks()">
            Click Here!
        </button>
        <br><br>
          
        <div id = "box">
            <div id = "content">
                Text content...
            </div>
        </div>
          
        <p id = "p"></p>
    </body>
</html>                    

Output:
Before click on the button:
scrollWidth
After click on the button:
scrollWidth

Supported Browsers: The browser supported by DOM scrollWidth property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :