【CSS Modules】scrollbar-gutterプロパティの使い方
scrollbar-gutterプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scrollbar-gutterプロパティは、要素にスクロールバーが表示された際に、コンテンツのレイアウトがずれることを防ぐための、スクロールバーの領域に関する情報を保持するプロパティです。このプロパティを使用することで、スクロールバーの有無による予期せぬレイアウトの変化（レイアウトシフト）を防ぎ、安定したユーザーインターフェースを提供できます。
設定可能な値としては主にautoとstableがあります。autoは、ブラウザがスクロールバーを必要と判断した場合にのみ、スクロールバーのためのスペースを確保するデフォルトの動作です。この場合、スクロールバーが表示される際にコンテンツが横にずれる可能性があります。
一方、stableは、スクロールバーが必要かどうかにかかわらず、常にスクロールバーのためのスペースを確保します。これにより、スクロールバーが動的に表示されたり非表示になったりしても、コンテンツの幅や位置が影響を受けることなく、レイアウトが常に安定した状態に保たれます。特に、コンテンツの幅が親要素に対して100%に設定されている場合などに、stableを指定することで、スクロールバーの表示によるコンテンツの縮小やずれを防ぐことができます。
また、stable both-edgesという値もあり、これはstableの機能に加えて、左右両端（縦スクロールバーの場合）にスクロールバー分のスペースを確保します。このプロパティは、ウェブページの見た目をより一貫させ、ユーザーエクスペリエンスを向上させるために役立ちます。
公式リファレンス: scrollbar-gutter
構文(syntax)
1selector { 2 scrollbar-gutter: stable both; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません