39 Scrollbar Gutter Stable. 39 of 95.
39/SCROLL BEHAVIOR/39 of 95
Scrollbar Gutter Stable
Reserve scrollbar space before you hide the scrollbar.
The problem
Opening a modal often sets overflow: hidden on the body. The scrollbar vanishes and the whole page shifts sideways by ~15px.
The solution
scrollbar-gutter: stable reserves the lane, so hiding overflow does not shift the layout.
Experiment
Play with the values
15px
How it works
- The page has a scrollbar, and that scrollbar occupies a lane in the layout.
- Opening a modal often sets overflow hidden, which removes the page scrollbar.
- Without a reserved lane, the content shifts sideways when the bar disappears.
- That shift is the bug: the layout changed because of a scrollbar, not because of content.
- scrollbar-gutter: stable keeps the lane reserved, so hiding overflow does not move the page.
Seen in
Dialog libraries
Radix, Headless UI, and others lock body scroll — gutter keeps the chrome stable.
Image lightboxes
Full-screen viewers hide page scroll without nudging the underlying layout.
Mobile menus
Drawer open/close no longer makes the page hitch sideways.
Cookie / consent modals
Blocking overlays do not introduce a CLS spike on open.