Update 2021 – Use scrollbar-gutter
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn’t needed.
body {
overflow-y: auto;
scrollbar-gutter: stable;
}
Example
Demo in Stack Snippets and jsFiddle
body {
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 273px);
grid-gap: 16px;
}
.card-header {
margin-bottom: 4px;
white-space: pre-line;
font-weight: bold;
}
.card-body {
overflow: auto;
border: 1px solid black;
height: 120px;
}
.scrollbar-stable {
scrollbar-gutter: stable;
}<h1><code>scrollbar-gutter</code> sample</h1>
<div class="grid">
<div class="card">
<pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
</pre>
<div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
</div>
<div class="card">
<pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
</pre>
<div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
</div>
<div class="card">
<pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
</pre>
<div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
</div>
<div class="card">
<pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
</pre>
<div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
</div>
</div>Further Reading
- Docs
- scrollbar-gutter | MDN
- scrollbar-gutter | CanIUse
- Articles
- Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter
- Explainer for the “scrollbar-gutter” CSS property.
- scrollbar-gutter | CSS-Tricks
- Specs
- CSS WG Blog – Minutes Telecon 2021-08-04
- CSS Overflow Module Level 3
- Related
- HTML reserve space for scrollbar
- Prevent scroll-bar from adding-up to the Width of page on Chrome
- Chrome reserves space for scrollbar even if it is hidden
- CSS 100% width but avoid scrollbar
- Alternatively, to have the scrollbar never take up space, see:
- Hide scroll bar, but while still being able to scroll