CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

[w_bonbon]

bodyだとやっぱりずれてしまうのでよくあるモーダル時にfix固定してスクロールキャンセルする等には依然工夫が必要か

[efcl]

scrollbar-gutter: stableでスクロールバーが出ない時も、スクロールバーと同じ幅を確保する

[tkmkg8m]

“scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときでもスクロールバーと同じだけの領域が確保され、内容の幅はその分狭くなります”

[mizdra]

なるほどー

[iww]

こんな便利なプロパティがあるのか。 スクロールバーの幅を求めたり足したり引いたりすげー苦労してるのがもうやらなくて済むのか

[spark7]

scrollbar-gutter: stable しらんかった。どのOSでも強制的にオーバーレイスクロールバーに揃えてくれる機能を期待したが、そうではなくスクロールバーが幅を取る環境の場合に、あらかじめその幅を占めておく機能だった。

[jay-es]

"scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときでもスクロールバーと同じだけの領域が確保" 試してみよう