#daiizメモ

Scrapboxに夢中

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

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

f:id:daiiz:20140815215535p:plain

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