I learned about scrollbar-gutter recently
and I can’t believe it’s not the default.
(Maybe I should make a whole series of these for CSS.)
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn’t needed.
I discovered this when I built a site with centered content. When navigating between pages, the content would shift a few pixels left/right. It took me a while to figure out that this was because some pages showed a scrollbar, and other pages didn’t.
A screen recording of the behavior
Observe the right side of this screen recording to see the scrollbar appear and disappear during navigation.
Setting scrollbar-gutter: stable fixes this behavior.
You can set it on any scrolling element;
I recommend doing so on the root html element.
html {
scrollbar-gutter: stable;
}
Not only is this something you have to specify, but it wasn’t even available until recently; MDN indicates this is in Baseline as of December 2024. What did poor designers do in the past, I don’t even want to know.