Post

How do you make the background of the scrollbar good looking when that property is set? I use it on my website, but then the background colors ends up matching just one color? (in my case it's my footer, because my html has the bg color set to the footer so that on smaller pages it looks ok)

You can’t. It sucks. (Happy to be proved wrong!)

Here's what happens: You open a modal. Then you usually disable scrolling by adding overflow: hidden to the body tag. It disables scrolling and the scrollbar disappears.

Then boom, your page jumps, say, 15px, to the left because the content expands to fill the space where the scrollbar was. As a result you get a layout shift. To fix this, you can use scrollbar-gutter: stable.

What it does: Reserves space for the scrollbar even when it's not visible. When the modal opens and the scrollbar disappears, the space stays reserved, so you won't have any layout shifts. How to use it 👇