スクロールバーの表示によるガタツキを防ぐscroll-gutter
コンテンツの増減によりスクロールバーが表示されたり消えたりするときに、レイアウトがガタつくことがある。これを防ぐためにscroll-gutterプロパティを使うことができる。
Safari TP 203が対応したことで、近い将来全主要ブラウザで利用可能になる。
サポート状況
- Chrome 94
- Edge 94
- Firefox 97
- Safari TP 203
scrollbar-gutter
/**
* デフォルト: スクロールバー分のスペースは確保されない
*/
.container {
scrollbar-gutter: auto;
}
/**
* あらかじめスクロールバー分のスペースが確保される
*/
.container {
scrollbar-gutter: stable;
}
/**
* 両サイドにスクロールバー分のスペースが確保される
*/
.container {
scrollbar-gutter: stable both-edges;
}
デモ
scrollbar-gutter: auto
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
scrollbar-gutter: stable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
scrollbar-gutter: stable both-edges
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.