获取不包括水平滚动条的视口高度？答案

【问题标题】：Get viewport height excluding horizontal scrollbar?获取不包括水平滚动条的视口高度？
【发布时间】：2013-11-12 03:48:51
【问题描述】：

window.innerHeight 给出视口的高度包括水平滚动条的高度。有没有办法找到 usable 内部高度，即不包含水平滚动条的方法？

理想情况下，我正在寻找一种纯 JS 解决方案，但如果没有，jQuery 等也可以。

【问题讨论】：

你在说什么？ .innerHeight 不包括滚动条。 w3schools.com/jsref/prop_win_innerheight.asp
是的，我是这么想的，但似乎确实如此。
来自 MDN：“浏览器窗口视口的高度（以像素为单位），包括水平滚动条（如果呈现）”
嗯，我实际上在 Chrome 上进行了测试，它确实包括水平滚动条高度。另外，我相信 MDN 比任何时候的垃圾 w3schools 都多。你现在可以取消你的反对票吗，我真的需要一个答案吗？ :)
Get the height and width of the browser viewport without scrollbars using jquery?的可能重复

标签： javascript jquery height viewport

【解决方案1】：

我在这里找到了解决方案：scrollbar detection demo （我可以在这里放置其他人网站的链接吗？）

用到了以下两个函数：

// check current presence of H & V scrollbars
// @return array [ Boolean, Boolean ]
function getSBLive(w) {
    var d = w.document, c = d.compatMode;
    r = c && /CSS/.test(c) ? d.documentElement : d.body;
    if (typeof w.innerWidth == 'number') {
        return [ w.innerWidth > r.clientWidth, w.innerHeight > r.clientHeight ];
    } else {
        return [ r.scrollWidth > r.clientWidth, r.scrollHeight > r.clientHeight ];
    }
}

// get current H & V scrollbars tickness
// @return array [ Number, Number ]
function getSBSize(w) {
    var d = w.document, b = d.body, r = [ 0, 0 ], t;
    if (b) {
        t = d.createElement('div');
        t.style.cssText = 'position:absolute;overflow:scroll;top:-100px;left:-100px;width:100px;height:100px;';
        b.insertBefore(t, b.firstChild);
        r = [ t.offsetHeight - t.clientHeight, t.offsetWidth - t.clientWidth ];
        b.removeChild(t);
    }
    return r;
}

然后您可以使用这些函数来查找没有滚动条的窗口高度：

var sbLive = getSBLive(window);
var sbSize = getSBSize(window);

var windowHeightWithoutScrollBar = sbLive[0] ? sbSize[0] : 0;

【讨论】：

【解决方案2】：

如果我告诉你这比你想象的要容易（或者比你当时想象的要容易）document.body.clientWidth;

【讨论】：

【解决方案3】：

jQuery 解决方案是$(window).height();。

【讨论】：