This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS’ System Settings high enough that it would seem to imply some level of common usage (even though it’s not a default).
I don’t necessarily prefer the behavior this feature enables but I use it as an implied measure of quality when browsing the web .
I typically see the following problems:
- Pages that have horizontal overflow (and a scrollbar to match) are more obvious.
- Pages may move ~20px horizontally when sites toggle document-level
overflow: hiddenwhen toggling modals/dialogs. - On particulary slow pages you may even see pages shift when progressively rendering content slower than it can fill one “page fold.”
The easiest thing folks can do to workaround this issue is add html { overflow-y: scroll; } to your CSS resets, which can be a great way to very easily reduce those content layout shift issues! But this little snippet adds a scrollbar to every page.
To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter CSS property. scrollbar-gutter is Baseline 2024 Newly Available, so make sure you enhance it with a @supports guard.
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}This would look great in your reset stylesheet.
Related: Two Browsers Walked Into a Scrollbar (2019)
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2025-09-18T05:00:00+00:00) A tiny bit-o-CSS for Stable Scrollbar Gutters. Retrieved from https://www.scien.cx/2025/09/18/a-tiny-bit-o-css-for-stable-scrollbar-gutters/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.