気になると夜しか眠れないスクロールバーのサイズ
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のいづれかが０の場合は再トライが必要。
// タイミングによってはwidthが０になるため再処理
if (scrollbarSize.width === 0 || scrollbarSize.height == 0) {
return this.resizeDivTable(0);
}
ブラウザのDevTools上で【F5】を押すと無限ループしやすいので再トライ数を制限した方がいい。