Question

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

我理想地寻找纯粹的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;

Answer 2

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

Answer 3

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

获取不包含水平滚动条的视口高度？

3 个答案: