CSSのみでスクロールバーの幅を取得する方法

コンテナクエリの登場により、これまでJavaScriptに頼ることが多かった処理も、CSSだけで扱えるようになってきました。

この記事では、その仕組みを使ってCSSのみでスクロールバーの幅を取得する方法を紹介します。

最小構成

CSSのみでスクロールバーの幅を取得するための最小構成です。

@property --scrollbar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px; 
}

html {
  container-type: inline-size;
}

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

ポイントは、100vwとコンテナクエリ単位の100cqwを比較している点です。

100vwはスクロールバーを含んだビューポート幅、100cqwはスクロールバーを除いた表示領域の幅になるため、その差分がスクロールバーの幅になります。

ここではその差を--scrollbarというカスタムプロパティに格納しています。

デモ

スクロールバーの幅がよく使われる例としては、親要素の幅を超えて、セクションを画面幅いっぱいに表示したい場合です。

See the Pen CSSのみでスクロールバーの幅取得 by hisa (@hisaaashi) on CodePen.

単純に100vwを指定した場合は、横スクロールが発生してしまいますが、スクロールバーを考慮して計算すると画面幅ぴったりに収めることができます。

JavaScriptが不要

JavaScriptでスクロールバーの幅を取得する場合、スクリプトの実行タイミングによっては、表示後にレイアウトがずれてしまうことがあります。

一方、CSSのみで計算することで、初期描画の時点でレイアウトが確定し、レイアウトシフトが発生しません。

JavaScriptが無効な環境でもそのまま動作するのも大きなメリットです。

まとめ

CSSだけでスクロールバーの幅を考慮したフル幅レイアウトが可能になりました。

100vwを使う場面での一つの選択肢として覚えておくと便利です。

あわせて読みたい

【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装 おしゃれなコーポレートサイトでよく見かける、横に流れる文字（スクロールテキスト）の実装方法をご紹介します。 HTMLもCSSも超簡単なので是非お試しください。 HTML H…

カスタマイズに困ったらお気軽にご相談を！

• 「ちょっとしたCSSの調整だけお願いしたい」
• 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔