search

WICG / visual-viewport

A proposal to add explicit APIs to the Web for querying and setting the visual viewport
https://wicg.github.io/visual-viewport/
MIT License
177 stars 28 forks source link

How to get the size of the visual viewport + scrollbars? #62

Closed theres-waldo closed 5 years ago

theres-waldo commented 5 years ago

The size returned by the Visual Viewport API excludes any space taken up by scrollbars.

What if a web page wants to know the size including the scrollbars? In Firefox, it can currently use window.innerWidth. However, if we switch window.innerWidth to report the size of the layout viewport instead as Chrome has done, that will no longer work; is there a replacement?

cc @mstange @bokand

bokand commented 5 years ago

There's a bit of context here in #19

window.innerWidth in Chrome refers to the layout viewport and has the same semantics regarding scrollbars. Although the scrollbar doesn't zoom and sticks to the visual viewport, the layout space taken by it on the layout viewport remains the same so I think this makes sense. So the summary:

Layout Viewport Including Scrollbars: window.innerWidth Layout Viewport Excluding Scrollbars: documentElement.clientWidth Visual Viewport Excluding Scrollbars: visualViewport.width Visual Viewport Including Scrollbars: N/A (this was #19 but I haven't heard of any pressing use cases here - it seems excluding scrollbar is the useful dimension).

theres-waldo commented 5 years ago

Interesting -- so the scrollbar width can still be computed as window.innerWidth - documentElement.clientWidth if those return layout viewport metrics. That's good enough for me, thanks.