スクロールバーの幅

スクロールバーの幅を知りたいことはままある。CSSで拾えれば最高なのだけど……というところで、calc(100vw - 100%)で拾えることがわかった。ただこれで拾えるかどうかはその要素の親に依存するので、いつでもどこでも使えるわけではない。せめてJavaScriptでは扱えるようにしてみたい。

Demo: Get Scrollbar Width with JavaScript

ボタンをクリックするとスクロールバーの幅がダイアログで表示される。オーバーレイのスクロールバーの場合は0pxになり、そうでない場合はスクロールバーの幅が返る。body要素の幅が100%であることが条件になるが、まず大丈夫だろう。

仕組みは単純なものでwidthプロパティーをcalc(100vw - 100%)にした要素をbody要素の子に突っ込んで、計算済みスタイルを拾うというだけだ。overflowプロパティーを切り替え要素の幅を比べる古くからあるものと比べるとコードはわかりやすく短い。その半面、vw単位とcalc()関数への対応が必要と敷居は少し高い。

そのうち全てオーバーレイ・スクロールバーになりそうではあるので、その暁には無駄な知識になる。是非なってほしい。