6

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

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

4

3 回答 3

1

我在这里找到了一个解决方案：滚动条检测演示 （我可以在这里放置指向其他人网站的链接吗？）

使用了以下两个函数：

// 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;
于 2014-03-13T12:15:18.647 回答
1

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

于 2017-11-26T16:08:54.943 回答
0

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

于 2013-10-31T23:40:46.660 回答