CSSだけでスクロールバーの幅を取得する

100vw - 100cqwでスクロールバーの幅がわかる。

<length>の意味

• vw: ウェブページの表示領域（viewport）のwidthを100としたときの単位
• cqw: クエリコンテナのwidthを100としたときの単位
  • html要素にcontainer-type: size;を指定することで、スクロールバーを除いたwidthを取得できる。

  html {
    container-type: size;
    /* 100cqw = スクロールバーを除いたwidth */
  }
  

スクロールバーのwidthを取得する

html {
  container-type: size;
}

body {
  --scrollbar: calc(100vw - 100cqw);
}

<======= 100vw ========>
+--------------------+-+
|                    | |
|<===== 100cqw =====>| |
|                    | |
+--------------------+-+
                      ^
                  scrollbar

デモ

@property --scrollbar {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px; 
}
html {
  container-type: size;
}
body {
  --scrollbar: calc(100vw - 100cqw);
}

body:before {
  content: counter(val) "px";
  counter-reset: val tan(atan2(var(--scrollbar),1px));
}

参考サイト

• Get the scrollbar width using only CSS

ブラウザ対応状況