Top > IT > Web > HTML > ScrollbarWidth
Last-modified: Thu, 11 Feb 2016 09:11:38 JST
Counter:4913 Today:1 Yesterday:0 Online:5
このエントリーをはてなブックマークに追加

(注意) 記事を引っ越しました

デスクトップブラウザのスクロールバーの幅

レスポンシブデザインを実装するときはビューポートを考慮しますが、ブラウザによっては、ビューポートにスクロールバーを考慮したりしなかったりします。

そこで簡単に実装するためにはスクロールバーの幅の分だけ余裕を持たせてデザインする必要があるのですが、実際にはどれだけの幅を考慮すればよいのか分からないので、とりあえずデスクトップブラウザでチェックしました。

BrowserVer.width(px)
IE11.x17 - 17
FireFox31.x15 - 16
Chrome36.x13 - 15
Safari(win)5.x15 - 17
Opera23.x15 - 17

1920ディスプレイの Win8 デスクトップ機でスクリーンキャプチャから計測した値です。スクロールバーの(両)横に 1px - 2px 程度の微妙な枠が含まれていて、どこまでがビューポートとして認識されているかわかりませんでした。したがって幅はその分の誤差を持たせて表記しています。IE はビューポートにスクロールバーを考慮しなかったと記憶していますが、バージョンの差もあるでしょうから念のため。

これに加えてスマートフォンなどを考慮する必要があるわけですが、それを込みにしても、スクロールバーは 20px 程度の幅を見ておけば良さそうです。