JavaScript でスクロールバーの幅を取得して CSS カスタムプロパティとして設定する
Published Feb 2, 2025
⋅
Updated Feb 16, 2025
次の例では、 ResizeObserver
を使ってリサイズを監視し、スクロールバーの幅を取得して、CSS カスタムプロパティとして設定している。
/**
* Get the scrollbar width and set it as a CSS variable
*/
const resizeObserver = new ResizeObserver(() => {
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
});
resizeObserver.observe(document.documentElement);
このように、 window.innerWidth
から document.documentElement
の clientWidth
を引くとスクロールバーの幅を取得できる。
参考