Scroll Gutter

Another thing related to scrolling is the scroll bar gutter. Taking the previous example as an example, when the content becomes longer, adding a scroll bar will cause the layout to shift. The reason for the layout shift is to reserve space for the scroll bar.

The two birds are singing in the river.
A beautiful lady is the ideal match for a gentleman.

The water chestnuts are scattered, flowing left and right.
A beautiful lady is sought day and night.

If I cannot find her, I will think of her day and night.
I am so leisurely, and the water is turning side by side.

The water chestnuts are scattered, and I pick them left and right.
A beautiful lady is a good match for a gentleman with zither and qin.

The water chestnuts are scattered, and I stir them left and right.
A beautiful lady, bells and drums are playing for her.

Notice how the content moves when it gets longer due to showing the scrollbar. We can avoid this behavior by using the property scrollbar-gutter.

.body {
  scrollbar-gutter: stable;
}

The two birds are singing, on the island in the river.
A beautiful lady, a gentleman is looking for her.

The water chestnuts are uneven, flowing left and right.
A beautiful lady, day and night seeks her.

I cannot get what I want, day and night I think of her.
I am so leisurely, the spool turns over and over.

The water chestnuts are uneven, picking them left and right.
A beautiful lady, playing the zither and the harp.

The water chestnuts are uneven, sifting them left and right.
A beautiful lady, playing the bell and the drum.

scrollbar-gutter: stable will reserve space for the scrollbar in advance. Therefore, when calculating the padding in the , the width of the scrollbar should be considered to adapt the UI effect.