HTML DOM Element scrollWidth Property

Definition and Usage

scrollWidth The property returns the width of the element, in pixels, including padding, but not including borders, scrollbars, or margins.

scrollWidth The property is read-only.

Note:scrollWidth and scrollHeight Both return the entire height and width of the element, including the invisible parts (due to overflow).

See also:

scrollHeight property

CSS overflow Property

Instance

Example 1

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

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

Try it yourself

Example 2

How padding, border, and scrollbar affect scrollWidth and scrollHeight:

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

Try it yourself

Example 3

Set the height and width of the element to the values returned by scrollHeight and scrollWidth:

element.style.height = element.scrollHeight + "px";
element.style.width = element.scrollWidth + "px";

Try it yourself

Syntax

element.scrollWidth

Return value

Type Description
Number The width of the element, in pixels.

Browser support

All browsers support element.scrollWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support