Element.scrollWidth

  • Revision slug: DOM/element.scrollWidth
  • Revision title: element.scrollWidth
  • Revision id: 109269
  • Created:
  • Creator: Ms2ger
  • Is current revision? No
  • Comment Update; 5 words added, 7 words removed

Revision Content

{{ DomRef() }}

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

{{ languages( { "fr": "fr/DOM/element.scrollWidth", "pl": "pl/DOM/element.scrollWidth" } ) }}

Revision Source

<p>
{{ DomRef() }}
</p>
<h3 id="Summary" name="Summary">Summary</h3>
<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>
<h3 id="Syntax_and_values" name="Syntax_and_values">Syntax and values</h3>
<pre class="eval">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>
<h3 id="Example" name="Example">Example</h3>
<pre>&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>
<h3 id="Specification" name="Specification">Specification</h3>
<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><h3 id="References" name="References">References</h3>
<p>{{ MSDN("ms534619", "scrollWidth Property") }}
</p>
<h3 id="See_also" name="See_also">See also</h3>
<ul><li> <a href="en/DOM/element.clientWidth">DOM:element.clientWidth</a>
</li><li> <a href="en/DOM/element.offsetWidth">DOM:element.offsetWidth</a>
</li><li> <a href="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a>
</li></ul>
<div class="noinclude">
</div>
{{ languages( { "fr": "fr/DOM/element.scrollWidth", "pl": "pl/DOM/element.scrollWidth" } ) }}
Revert to this revision