Get width and height of viewport excluding scroll bars

Question

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?

Answer 1

document.body.clientWidth 和 .clientHeight 可能是您正在寻找的。