'Get width and height of viewport excluding scroll bars
Okay, I've read about 1000 different ideas here but no answer seems to be complete.
I have a page that scrolls both horizontally and vertically, therefore, I have both horizontal and vertical scrollbars. I want the width of the viewport EXCLUDING the scrollbar and the height of the viewport EXCLUDING the scrollbar. Please also consider padding, and margins and borders etc.
For width, I originally had window.innerWidth but that included the scroll bar so I came to this solution that also accounts for body margin, padding and border, document.body.offsetWidth + parseInt(window.getComputedStyle(document.body).getPropertyValue('margin-left')) + parseInt(window.getComputedStyle(document.body).getPropertyValue('margin-right'))
Most other solutions for height either recommend window.innerHeight (but this includes the horizontal scrollbar which is not good) or document.body.clientHeight (which returns the whole length of the page, not just the viewport.)
So, does anyone have a solution for something so seemingly trivial?
Solution 1:[1]
document.body.clientWidth and .clientHeight maybe what you're looking for.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Erique Bomfim |