scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下のような挙動があります。 オーバーレイスクロールバー：スクロールバー自体が幅を持たず、スクロール領域に重なって表示される クラシックス

[zxcvdayo]

Safariで設定からフラグ有効化しないと使えず、はい…… https://caniuse.com/?search=scrollbar-gutter%20

[jay-es]

scrollbar-gutter: stable;

[ghostbass]

これ width:100%なボックスに色塗るとスクロールバーの部分が色塗られないやつ？

[Phenomenon]

ねーこれjsで頑張ってガタつかなくしてたから助かるわ

[lli]

こんなプロパティまであるんだねぇ