In this section, we will learn what the Element scrollWidth property is and how to use it in JavaScript.

What is Element scrollWidth Property in JavaScript?

The JavaScript Element scrollWidth property is used to get the width of the content of an element in pixels.

This width includes the padding but not border, vertical scroll-bar (if any), and the margin.

Note that we’re saying width of the entire content of an element! That means even the part of an element that is not viewable will be counted as part of the width.

Element scrollWidth Property Syntax:

element.scrollWidth;

Element scrollWidth Property Input Value

The scrollWidth property is read-only and so we can’t assign a value to it.

Element scrollWidth Property Return Value

The return value of this property, as mentioned before, includes the width of the content and padding of the target element. Again, this means the border, vertical scroll-bar, and margins won’t be included as part of the width.

Example: using scrollWidth Property in JavaScript

See the Pen using scrollWidth Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.