THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML DOM scrollWidth Property

HTMLElement Object Reference Element Object

Example

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

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The scrollWidth property returns the entire width of an element in pixels, including padding, but not the border, scrollbar or margin.

Tip: Use the scrollHeight property to return the entire height of an element.

The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow).

Tip: To add scrollbars to an element, use the CSS overflow property.

This property is read-only.


Browser Support

Property
scrollWidth Yes Yes Yes Yes Yes

Syntax

element.scrollWidth

Technical Details

Return Value: A Number, representing the entire width (horizontally) of an element, in pixels

Examples

More Examples

Example

Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »

Example

Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:

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";
}
Try it Yourself »

HTMLElement Object Reference Element Object