CSS Reference

scrollbar-gutter

スクロールバーのためのスペースをあらかじめ確保する

scrollbar-gutter プロパティは、スクロールバーの表示に関連して「スクロールバーガター」の存在をコントロールするためのもので、overflow プロパティによるスクロールバー自体の表示制御とは別に設定できます。

「スクロールバーガター（Scrollbar Gutter）」とは、境界ボックスとその内側にあるパディングボックスの間に、ユーザエージェントがスクロールバーを表示するために確保するスペースのことです。

なお、このプロパティは、ボックスのインライン方向の始端や終端、つまり画面の左右に上下スクロールのために配置されるスクロールバーガターの存在を制御します。

例えば画面サイズやコンテンツのサイズ変更などによって、スクロールバーが表示されたり、されなかったりという変化が発生し、それによってレイアウトが変化する場合があります。scrollbar-gutter プロパティによって「スクロールバーガター」を確保しておくことで、そのような不要なレイアウトの変更を防ぐといった使い方ができます。

指定できる値は下記の通りです。

auto クラシックスクロールバーの場合、overflow が scroll のとき、または overflow が auto でボックスがオーバーフローしているときに、スクロールバーガターが確保されます。（既定値）
オーバーレイスクロールバーの場合、スクロールバーガターは確保されません。
stable クラシックスクロールバーの場合、overflow が hidden、scroll のとき、または auto で、ボックスがオーバーフローしていない場合でも、常にスクロールバーガターが確保されます。ただし、このプロパティはスクロールバー自体が表示されるかどうかについては影響を与えず、あくまでガターの存在にだけ影響します。
オーバーレイスクロールバーの場合は、auto と同様、スクロールバーガターは確保されません。
both-edges stable 値のオプションとして、空白で区切って、stable both-edges のように指定可能です。
ボックスのインライン方向の始端か終端のいずれかにスクロールバーガターが存在する場合、もう一方の反対側にも必ずスクロールバーガターが確保されます。つまり、スクロールコンテナの左右にスクロールバーガターが確保されることになります。

scrollbar-gutterの仕様

初期値
  • auto
対象となる要素
  • スクロールコンテナ
継承
  • なし

詳細説明

オーバーレイスクロールバーとクラシックスクロールバー

スクロールバーの表示方法には主に2つの種類があります：

オーバーレイスクロールバー（Overlay Scrollbars）

コンテンツボックスの上に表示されるスクロールバーで、通常は半透明で、背景のコンテンツが透けて見えます。

スクロールバーが表示される場合でもスクロールバーガターは作成されません。

クラシックスクロールバー（Classic Scrollbars）

常にスクロールバーガター内に配置され、表示されるとその分のスペースを消費します。

スクロールバーの種類と表示

オーバーレイスクロールバーが使われるか、クラシックスクロールバーが使われるか、あるいは、スクロールバーの見た目やサイズ、ボックス内のどの位置に表示されるかについては、ユーザエージェントによって定義されます。

scrollbar-gutterのサンプルソース

.container {
  overflow: auto;
  scrollbar-gutter: stable;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome