Open In App
Related Articles

HTML DOM scrollWidth Property

Improve Article
Save Article
Like Article

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. 



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

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


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


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
Similar Reads
Related Tutorials