A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/dom/HTMLElement/scrollWidth below:

scrollWidth · WebPlatform Docs

scrollWidth

Property of dom/HTMLElementdom/HTMLElement

Syntax
var result = element.scrollWidth;
element.scrollWidth = value;
Examples

When the overflow property is set to auto, the content can exceed the dimensions of an element, and scroll bars appear. You can use the scrollWidth property to retrieve the width of the content within the element.

This example uses the scrollWidth property to compare the viewable width of the content to the actual width of a div element. The width of the element is exposed through the offsetWidth property.

<script type="text/javascript">
function fnCheckScroll() {
   var iScrollWidth = oDiv.scrollWidth;
   var iOffsetWidth = oDiv.offsetWidth;
   var iDifference = iScrollWidth - iOffsetWidth;
   alert("Width: " + iOffsetWidth
      + "\nscrollWidth: " + iScrollWidth
      + "\nDifference: " + iDifference);
}
</script>
...
<div id="oDiv" style="overflow: scroll; height= 50px; width= 400px; text-align: left" nowrap>
    ...
</div>
<button onclick="fnCheckScroll()">Check scrollWidth</button>

View live example

Notes Remarks

The width is the distance between the left and right edges of the object’s visible content. This property is read-only on HTML documents, and read-write on fixed regions. For more information about how to access the dimension and location of objects on the page through the Document Object Model (DOM), see Measuring Element Dimension and Location with CSSOM in Internet Explorer 9.

Syntax Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4