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.scrollWidthReturn Value: It returns the width of the content of the element in pixels.
Example: In this example, we will use the scrollWidth property.
<!--Driver Code Starts-->
<!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">
<!--Driver Code Ends-->
<div id="content">
Text content...
</div>
</div>
<p id="p"></p>
<script>
function Geeks() {
let doc = document.getElementById("content");
let x = doc.scrollWidth;
document.getElementById("p").innerHTML
= "Width: " + x + "px";
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It measures the full width of an element’s content, including content hidden due to horizontal overflow (i.e., the minimum width needed to fit all content without a horizontal scrollbar). It includes padding but excludes border, margin, and any vertical scrollbar. When no overflow exists, scrollWidth equals clientWidth.
- It is commonly used to detect horizontal overflow. Comparing scrollWidth with clientWidth is a reliable way to check whether an element’s content is wider than its visible area.
