What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To keep vertical scrolling available even when an element has no overflow, set overflow-y: scroll. For the document viewport, use html { overflow-y: scroll; }. Whether a scrollbar is visibly drawn—and whether it takes up page space—depends on the browser and operating-system scrollbar style.
Force a vertical scrollbar on an element
Apply overflow-y: scroll to the element you want to scroll. For example:
.scroll-box {
overflow-y: scroll;
}With this setting, browsers display vertical scrollbars whether or not content is clipped, according to the MDN overflow-y reference. The element can therefore retain a consistent content width as its contents change between overflowing and not overflowing.
Force a scrollbar on the document viewport
To apply the behavior to the page rather than a particular scrolling box, use:
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
html {
overflow-y: scroll;
}The property controls overflow behavior, but it cannot guarantee an always-painted scrollbar on every platform. Check the result in the browsers and operating systems your audience uses.
Choose between a permanent scrollbar and a stable layout
| CSS | What it does | Best fit |
|---|---|---|
overflow-y: scroll |
Enables vertical scrolling and displays a scrollbar even when content does not overflow, as described by MDN. | You want the scrollbar mechanism present at all times. |
overflow-y: auto |
Allows scrolling when content overflows, but displays scrollbars only when needed, as described by MDN. | You want scrolling without an unnecessary scrollbar. |
overflow-y: auto; scrollbar-gutter: stable; |
Reserves space for a classic scrollbar without requiring one to be drawn. MDN describes this as a way to avoid content shifting when overflow changes in its overflow guide. | You mainly want the content width to stay consistent. |
Use a stable gutter to prevent content shifts
If the problem is that content shifts when a scrollbar appears, rather than the absence of a visible scrollbar, reserve a gutter:
Rank #2
.page {
overflow-y: auto;
scrollbar-gutter: stable;
}MDN says scrollbar-gutter: stable reserves space for classic scrollbars with auto, scroll, or hidden overflow, even when the box is not overflowing. See the MDN scrollbar-gutter reference.
Why the scrollbar may not look permanent
Scrollbar appearance is partly controlled by the browser and operating system. Classic scrollbars consume layout space; overlay scrollbars are drawn over content and do not consume a gutter. With overlay scrollbars, a stable gutter does not make a visible scrollbar appear. Users’ system settings can also affect what they see.
MDN marks scrollbar-gutter as Baseline 2024—available across the latest browser versions and devices since December 2024—but notes it may not work on older devices. Check compatibility for the browsers you support before relying on it. The CSS property itself controls overflow behavior; test whether the scrollbar is actually visible on your target platforms.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
