JavaScriptでスクロールバーの幅を調べる

ウェブページをデザインしていたところ、「スクロールバーの横幅」の値が欲しくなった。

検索してもすぐには見つからなかったので、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） で確認しています。