ブラウザのスクロールバーの幅を取得してCSSに適用させる

vwを使ったサイト制作でスクロールバーの幅を把握する必要があったため実装しました。

const setSB = function () {
    let scrollbarWidth = window.innerWidth - document.body.clientWidth;
    document.documentElement.style.setProperty('--sb', `${scrollbarWidth}px`);
}
window.addEventListener('DOMContentLoaded', setSB);
window.addEventListener('resize', setSB);

これでスクロールバーの幅を取得出来ます。

width:calc(100vw - var(--sb));

上記CSSでスクロールバーを除いた画面全体の幅が設定できます。