javascript - 水平スクロールバーを除くビューポートの高さを取得しますか?

Question

window.innerHeight は、水平スクロールバーの高さを含むビューポートの高さを示します。使用可能な内部の高さ、つまり水平スクロールバーを含まないものを見つける方法はありますか?

私は理想的には純粋な JS ソリューションを探していますが、ない場合は jQuery などでも問題ありません。

Answer 1

ここで解決策を見つけました: scrollbar detection demo (ここに他の人の Web サイトへのリンクを配置できますか?)

次の 2 つの関数が使用されます。

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

jQuery ソリューションは$(window).height();.