Open In App

HTML DOM scrollWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

element.scrollWidth

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

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

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>
</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>
       
  <!-- script to find width of scroll -->
    <script>
        function Geeks() {
            let doc = document.getElementById("content");
            let x = doc.scrollWidth;
            document.getElementById("p").innerHTML
                = "Width: " + x + "px";
        }
    </script>
 
</body>
 
</html>


Output: 

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


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