変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

getBoundingClientRect

[javascript]スクロールバーのサイズ

気になると夜しか眠れないスクロールバーのサイズ

Windowsでは画面の解像度などで異なるし、古いXP等では「画面のデザイン」でも変更可能だった。

なので状況に応じて調べるしかない。

HTMLElementにスクロールバーを付けて

div.sample {
    overflow-x: scroll;
    overflow-y: scroll;
}

スクロールバーのサイズ = スクロールバーを含む領域 ー スクロールバーを含まない領域

から求められる。

具体的には

let div = document.querySelector('div.sample');
let rectDiv = div.getBoundingClientRect();
let scrollbarSize = {
    width: rectDiv.width - div.clientWidth,
    height: rectDiv.height - div.clientHeight
};

注意点としては

いつでも正しい数値が得られる訳では無いので

scrollbarSizeのwidthかheightのいづれかが0の場合は再トライが必要。

                //  タイミングによってはwidthが0になるため再処理
                if (scrollbarSize.width === 0 || scrollbarSize.height == 0) {
                    return this.resizeDivTable(0);
                }

ブラウザのDevTools上で【F5】を押すと無限ループしやすいので再トライ数を制限した方がいい。




top