HTML - DOM Element scrollWidth Property

Quiz

The HTML DOM Element scrollWidth is a read-only property is used to retrieve the total horizontal width of an element's content in pixels (or px).

This property includes content including what is not viewable (because of overflow) and any padding applied to the element. However, it excludes borders, margins, and scrollbars.

Syntax

Following is the syntax of the HTML DOM Element scrollWidth property −

element.scrollWidth;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

The scrollWidth property returns an integer value that holds the total horizontal width in pixels of an element's content.

Example 1: Determining the Width of Scrollable Container

The following is the basic example of the HTML DOM Element scrollWidth property. It returns the total width (in pixels) of the content inside a scrollable container −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollWidth</title> 
<style>
   #con{
      width: 200px;
      height: 100px;
      overflow: auto;
      border: 1px solid black;
     
   }
   #content {
      width: 300px;
      height: 150px; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollWidth Property</h3>
<p>Determines the width of content inside a scrollable container:</p>
<div id="con">
<div id="content">This is the content inside the div element.
scroll me!!</div>
</div><br>
<span id="res"></span>
<script>
   const cont=document.getElementById('con');
   const r = document.getElementById('res');
   r.textContent = "Scrollable container width: " + 
   cont.scrollWidth + " pixels";
</script>
</body>
</html>

The above program retrieves the total scrollable width of the container in pixels.

Example 2: Displaying Scrollable Content Width Dynamically

Here is another example of using the HTML Element DOM scrollWidth property. We use this property to retrieve the width of the scrollable container (box) in pixels −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollWidth</title>  
<style>
   #cont {
     height: 30px;
     overflow: auto;
     border: 1px solid black;
     padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollWidth Property</h3>
<div>
<p>Click the button to display the total scrollable width of the 
container:</p>
<p>Try editing the content inside the container.</p>
<div id="cont" contenteditable="true">Click here to edit!! Content that 
exceeds the container height.</div>
<br>
<button onclick="showScrollWidth()">Show Scrollable Width
</button>
<p>Scrollable content width: <span id="r"></span></p>
</div>
<script>
   function showScrollWidth() {
      const con = document.getElementById('cont');
      const r = document.getElementById('r');
      r.textContent = con.scrollWidth + 'px';
   }
</script>
</body>
</html>

Once the above program is executed, it will display the total scrollable width in pixels dynamically.

Example 3: Dynamically Adjusting Textarea Width

The example below shows how to use the scrollWidth property to adjust the textarea field width when you start writing the values into it −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollWidth</title>
<style>
   #textcon {
      width: 300px;
      margin: 20px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow-x: auto;
   }
   text{  
      border: 1px solid black;
      box-sizing: border-box; 
      transition: width 0.3s;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollWidth Property</h3>
<h4>Determines the total width of scrollable content.</h4>
<div id="textcon">
<p>Type in the textarea to see it expand or compress width dynamically:</p>
<textarea id="m" oninput="autoAdjustTextarea(this)"></textarea>
<p>Current width:<span id="ch">Auto</span></p>
</div>
<script>
   function autoAdjustTextarea(text) {
      text.style.height = 'auto';  
      text.style.width = text.scrollWidth + 'px';  
      document.getElementById('ch').textContent = text.scrollWidth + 'px';  
   }
</script>
</body>
</html>

The above program automatically adjusts the scrollable width of the textarea field when you start writing.

Supported Browsers

Property
scrollWidth	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page