Always Visible Vertical Scrollbar

Reserve vertical scrollbar space anywhere its appearance or disappearance would cause UI layout shift. Use overflow-y-scroll for primary page and panel scrolling regions, including every website root, or scrollbar-gutter: stable when the scrollbar itself should remain conditional.

Correct

.panelContent {
    @apply overflow-y-scroll;
}
html {
    overflow-y: scroll;
}
html {
    scrollbar-gutter: stable;
}

Incorrect

.panelContent {
    @apply overflow-y-auto;
}
html {
    overflow-y: auto;
}

Exceptions

• Print styles may allow the full document to flow without reserving a screen scrollbar.

Fix

Reserve vertical scrollbar space with overflow-y-scroll or scrollbar-gutter: stable on the primary scrolling region.