How to get the viewport size excluding scrollbars in pure JavaScript?

Question

I am now rewriting some old codes to work with modern browsers. One problem is persistent to me: the viewport size. I wish to put a DIV element in the center but with the scrollbar, it won't be right. Also, I wish to put a button near the right border but the scrollbar is rendered over my button.

I am using plain simple...

window.innerWidth

... to get the width, but won't consider vertical scrollbar, if there is. I have looked inside MDN documentation for something to give me the right number...

document.body.clientWidth (give a smaller number, about twice width of scrollbar)

Also this property has a special behavior for body, but to me is just wrong. I did't find a way to get the size of each scrollbar, so I am now out of ideas. I know this is asked a lot, as here, but I wish to go to the bottom of this subject thinking in new browsers and latest ECMAScript definitions, with some retro compatibility.

Does this answer your question? [How to get screen width without (minus) scrollbar?](https://stackoverflow.com/questions/8339377/how-to-get-screen-width-without-minus-scrollbar) — Wais Kamal, Jun 17 '21 at 22:36
That's not pure JavaScript. The answer has an option in js but it does not work either. — Gustavo, Jun 17 '21 at 23:08
`window.innerWidth` gives the width including scrollbars. `document.body.clientWidth` and `document.body.offsetWidth` both give the width without scrollbars. — Wais Kamal, Jun 18 '21 at 07:20
Does [this](https://stackoverflow.com/a/13382873/3388225) answer you question? — aleksxor, Jun 18 '21 at 12:42
@aleksxor: This is a start to an answer to my question, a good one! I will save the code he did to my library, is good to have more than one solution. Take a look in my own answer, a different approach. — Gustavo, Jun 18 '21 at 14:07
@Wais Kamal: this property won't work, as you can see in my own answer. — Gustavo, Jun 18 '21 at 14:07

score 0 · Answer 1 · answered Jun 18 '21 at 12:27

I did a webpage to play with those properties and it's values. It seems the only way to get what is needed in this case, the right green box positioning, is thought empiricism. So this is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#result { width:2000px; height:1600px; }
#bottomright {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 64px;
    height: 64px;
    border: black solid 1px;
}
</style>
<script type="text/javascript">
function ini() {
    var Sizes = [
        { method:"window.inner", color:"red", width:window.innerWidth, height:window.innerHeight },
        { method:"document.body.offset", color:"blue", width:document.body.offsetWidth, height:document.body.offsetHeight }
    ];
    var html = "<h2>Methods do get de window size:</h2>";
    for(let i=0; i<Sizes.length; i++) {
        html += '<p style="color:'+Sizes[i].color+';">'+Sizes[i].method+'</p>';
        document.body.appendChild(Box(0, 0, 64, 64, Sizes[i].color));
        document.body.appendChild(Box(Sizes[i].width-66, 0, 64, 64, Sizes[i].color));
        document.body.appendChild(Box(0, Sizes[i].height-66, 64, 64, Sizes[i].color));
        document.body.appendChild(Box(Sizes[i].width-66, Sizes[i].height-66, 64, 64, Sizes[i].color));
    }
    const size = realSize();
    document.body.appendChild(Box(size.width-34, size.height-34, 32, 32, "green"));
    html += '<p style="color:green;">Real Size</p>';
    document.getElementById("result").innerHTML = html;
}
function Box(x, y, w, h, color) {
    const elm = document.createElement("div");
    elm.style.border = color+" solid 1px";
    elm.style.position = "fixed";
    elm.style.left = x.toString()+"px";
    elm.style.top = y.toString()+"px";
    elm.style.width = w.toString()+"px";
    elm.style.height = h.toString()+"px";
    return elm;
}
function realSize() {
    const elm = document.createElement("div");
    elm.style.id = "sizeFinder"; // will look at later
    elm.style.border = "0px"; // just in case
    elm.style.position = "fixed";
    elm.style.right = "0px"; // the real right
    elm.style.bottom = "0px"; // the real bottom
    elm.style.width = "10px"; // some width, just in case
    elm.style.height = "10px"; // some height, just in case
    document.body.appendChild(elm);
    const box = elm.getBoundingClientRect()
    return { width:box.x+10, height:box.y+10 };
}
</script>
<title>Window Size Test</title>
</head>
<body onload="ini();">
<h1>Window Size Test</h1>
<div id="result"></div>
<div id="bottomright"></div>
</body>
</html>

This is the result:

Note that I did the green box with half size to not cover the other boxes. Also, might be a good idea to have an invisible box fixed at the corner to get the actual window size when needed, thought is what I will do.

Please test and share comments, I am still worry if this will work with any browsers and have some retro compatibility.

How to get the viewport size excluding scrollbars in pure JavaScript?

1 Answers1