Skip to content
Related Articles

Related Articles

HTML | DOM scrollWidth Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022

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: 

HTML




<!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 1
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 12.1
  • Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!