osgsm.io
HomeNotesJavaScript でスクロールバーの幅を取得して CSS カスタムプロパティとして設定する

JavaScript でスクロールバーの幅を取得して CSS カスタムプロパティとして設定する

Published Feb 2, 2025
Updated Feb 16, 2025

次の例では、 ResizeObserver を使ってリサイズを監視し、スクロールバーの幅を取得して、CSS カスタムプロパティとして設定している。

set-scrollbar-width.ts
/**
 * 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.documentElementclientWidth を引くとスクロールバーの幅を取得できる。


参考