Easy Tutorial
❮ Prop Month Type Prop Style Transitiondelay ❯

HTML DOM scrollWidth Property

Element Object

Example

Get the height and width of a div element, including padding:


Definition and Usage

The scrollWidth property is a read-only property that returns the pixel width of the element, including padding but not including margin, border, or vertical scrollbar. It returns an integer in pixels.

The scrollWidth value is equal to the minimum width the element would require to fit all content in the viewport without using a horizontal scrollbar. The measurement is the same as clientWidth: it includes the element's padding but excludes border, margin, or vertical scrollbar. It may also include the width of pseudo-elements like ::before or ::after. If the element's content fits without a horizontal scrollbar, its scrollWidth is equal to clientWidth.

This is a read-only property.


Browser Support

Property Chrome Edge Firefox Safari Opera
scrollWidth Yes Yes Yes Yes Yes

Syntax

element.scrollWidth

Technical Details

| Return Value: | Returns an integer representing the pixel width of the element. | | --- | --- |


More Examples

Example

Demonstrate the changes in scrollWidth and scrollHeight properties using padding, border, scrollbar, and margin:

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;

Example

Return the values of the scrollHeight and scrollWidth properties of an element, then use these values to set the scrollHeight and scrollWidth properties of another element:

var elmnt = document.getElementById("content");

function getFunction() {
  var x = elmnt.scrollWidth;
  var y = elmnt.scrollHeight;
}

function setFunction() {
  elmnt.style.height = y.scrollHeight + "px";
  elmnt.style.width = y.scrollWidth + "px";
}

Element Object

❮ Prop Month Type Prop Style Transitiondelay ❯