javascript - 获取不包括水平滚动条的视口(viewport)高度？

Question

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

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

Answer 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;