ウェブページをデザインしていたところ、「スクロールバーの横幅」の値が欲しくなった。
検索してもすぐには見つからなかったので、ChromeのConsoleを開き、自分でwindowオブジェクト内を探しに行くことにした。「スクロールバーを含んだブラウザの横幅（①）」はwindow.innerWidthで得られることは知っていた。
結果
結局、「スクロールバーの横幅」を直接教えてくれるメソッドやプロパティは見つけられなかった。しかし、document.body.clientWidthを使って「スクロールバーを含まないブラウザの横幅（②）」を得ることに成功した。これにより、①と②の差をとることで「スクロールバーの横幅」を得られた。
まとめ
| プロパティ | Live Demo*1 | |
|---|---|---|
| スクロールバーを含んだブラウザの横幅 | window.innerWidth |
-- px |
| スクロールバーを含まないブラウザの横幅 | document.body.clientWidth |
-- px |
| スクロールバーの横幅 | 上記の値の引き算 | -- px |
おわりに
探し始めたときは「なぜwindow.scrollbarWidthみたいのが無いんだよ！」と思っていたけれど、よく考えると、「スクロールバーの横幅」自体はデザインにおいてはそれほど重要ではなくて、「スクロールバーを除いた横幅」が分かればそれで十分だな・・・、と納得した。
*1:実際にJavaScriptを実行して求めています。ウィンドウのサイズを変えると値が変わります。Live Demo の動作は、Chrome, Safari, Firefox, Opera, IE（いずれもWindows PC） で確認しています。
