getting width of content, not viewport using vanilla JavaScript

Question

I have tried the following and gotten the viewport width:

document.documentElement.clientWidth

and

window.innerWidth

However, what I want to get is the width of the content including overflow, for example if I had an image on the page <img src=".." style="width: 4000px !important;" />. In other words, the entire scrollable width. How would I do this?

The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow. If the element's content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth. — Banzay
– Banzay, Commented May 13, 2019 at 11:23

Mihai T · Accepted Answer · 2019-05-13 13:37:32Z

2

Use scrollWidth for the body scrollWidth docs . Also please don't use !important . Only use it as a last resort

console.log(document.body.scrollWidth)

 <img src="https://via.placeholder.com/150" style="width: 4000px;" />

edited May 13, 2019 at 13:37

answered May 13, 2019 at 11:25

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Edwin Dijas Chiwona · Accepted Answer · 2019-05-13 11:26:59Z

-1

You can do this with Element.offsetWidth

document.documentElement.offsetWidth

You can read more about offsetWidth here

answered May 13, 2019 at 11:26

Edwin Dijas Chiwona

6106 silver badges15 bronze badges

2 Comments

Barrosy Over a year ago

Why is this downvoted? I am kind of curious as well and this seemed a solution I stumbled upon as well.

Mihai T Over a year ago

@Barrosy Just check it and see if it works. jsfiddle.net/c1p2k3of

Collectives™ on Stack Overflow

getting width of content, not viewport using vanilla JavaScript

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related