如何在纯 JavaScript 中获取不包括滚动条的视口大小？答案

【问题标题】：How to get the viewport size excluding scrollbars in pure JavaScript?如何在纯 JavaScript 中获取不包括滚动条的视口大小？
【发布时间】：2021-06-18 20:27:25
【问题描述】：

我现在正在重写一些旧代码以使用现代浏览器。一个问题对我来说一直存在：视口大小。我希望将一个 DIV 元素放在中心，但使用滚动条，它不会是正确的。另外，我希望在右边框附近放置一个按钮，但滚动条呈现在我的按钮上。

我正在使用简单的...

window.innerWidth

... 获取宽度，但不会考虑垂直滚动条，如果有的话。我在 MDN 文档中查看了一些可以给我正确号码的东西...

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

这个属性对身体也有特殊的行为，但对我来说是错误的。我没有找到获取每个滚动条大小的方法，所以我现在没有想法。我知道这个问题很多，as here，但我希望深入了解这个主题，考虑新的浏览器和最新的 ECMAScript 定义，并具有一些复古兼容性。

【问题讨论】：

这能回答你的问题吗？ How to get screen width without (minus) scrollbar?
这不是纯 JavaScript。答案在js中有一个选项，但也不起作用。
window.innerWidth 给出包括滚动条的宽度。 document.body.clientWidth 和 document.body.offsetWidth 都给出了没有滚动条的宽度。
this 会回答你的问题吗？
@aleksxor：这是回答我的问题的开始，很好！我会将他所做的代码保存到我的库中，最好有多个解决方案。看看我自己的答案，一种不同的方法。

标签： javascript viewport

【解决方案1】：

我做了一个网页来使用这些属性及其值。似乎在这种情况下获得所需的唯一方法，正确的绿盒定位，是思想经验主义。所以这是代码：

<!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>

这是结果：

请注意，我做了一半大小的绿色盒子，以不覆盖其他盒子。另外，在角落固定一个不可见的框以在需要时获得实际的窗口大小可能是个好主意，我会这样做。

请测试并分享 cmets，我仍然担心这是否适用于任何浏览器并具有一些复古兼容性。

【讨论】：