State of CSS 2022 を眺めていて知らなかったことのうち、scrollbar-gutterについて調べた
scrollbar-gutter
scrollbar-gutterプロパティはWeb でスクロールバーを表示する際の余白を制御することができる
スクロールバーは種類によってはコンテンツのレイアウトが変わり、レイアウトシフトが起きてしまう可能性がある
そこで、scrollbar-gutterを使うと、事前に余白を用意しておくなどができ、レイアウトシフトが起きないようにすることができる
例えば、事前に余白を用意しておく場合
scrollbar-gutter: stable;
両側に同じくらいのスペースを用意しておく場合
scrollbar-gutter: stable both-edges;
このような感じでスペースを確保できる
