JavaScriptでスクロールバーの幅を取得する

JavaScriptでスクロールバーの幅を取得する

2019-11-12
JavaScript

スクロールバーありきのレイアウトを組みたいときにスクロールバーの幅を取得したい。

こういうふうにしてみるとどうだろうか。

// スクロールバーのサイズ取得
let scrollbarWidth = getScrollbarWidth();

function getScrollbarWidth() {
    let element = document.createElement('div');
    element.style.visibility = 'hidden';
    element.style.overflow = 'scroll';
    document.body.appendChild(element);
    const scrollbarWidth = element.offsetWidth - element.clientWidth;
    document.body.removeChild(element);

    return scrollbarWidth;
}

一度ダミーの要素をドキュメントに差し込んでスクロールバー分の幅を取るようにする。