HTML DOM scrollWidth Property

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>