Element.scrollWidth

  • Revision slug: Web/API/element.scrollWidth
  • Revision title: element.scrollWidth
  • Revision id: 477055
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{ DomRef }}

This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.

Summary

scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.

Syntax and values

var xScrollWidth = element.scrollWidth;

xScrollWidth is the width of the content of element in pixels.

Example

<div id="aDiv"
     style="width: 100px; height: 200px; overflow: auto;"
>-FooBar-FooBar-FooBar</div>
<br>
<input type="button" value="Show scrollWidth"
       onclick="alert(document.getElementById('aDiv').scrollWidth);">

Specification

The CSSOM View Module defines scrollWidth

References

{{ MSDN("ms534619", "scrollWidth Property") }}

See also

Revision Source

<div>
  {{ DomRef }}</div>
<div class="note">
  <p>This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.</p>
</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><b>scrollWidth</b> is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the <code>scrollWidth</code> is larger than the <code>clientWidth</code>.</p>
<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax and values</h2>
<pre class="syntaxbox">
var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
<p><var>xScrollWidth</var> is the width of the content of <var>element</var> in pixels.</p>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:html">
&lt;div id="aDiv"
     style="width: 100px; height: 200px; overflow: auto;"
&gt;-FooBar-FooBar-FooBar&lt;/div&gt;
&lt;br&gt;
&lt;input type="button" value="Show scrollWidth"
       onclick="alert(document.getElementById('aDiv').scrollWidth);"&gt;</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<p>The <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> defines <code>scrollWidth</code></p>
<h2 id="References" name="References">References</h2>
<p>{{ MSDN("ms534619", "scrollWidth Property") }}</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/element.clientWidth">DOM:element.clientWidth</a></li>
  <li><a href="/en-US/docs/DOM/element.offsetWidth">DOM:element.offsetWidth</a></li>
  <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
</ul>
Revert to this revision