# One CSS Trick to Eliminate Scrollbar Layout Shifts

DevFeed: [One CSS Trick to Eliminate Scrollbar Layout Shifts](<https://devfeed.tech/articles/one-css-trick-to-eliminate-scrollbar-layout-shifts-20472.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/one-css-trick-to-eliminate-scrollbar-layout-shifts/>)

Author: Amit Merchant

Published: 2025-11-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [layout](<https://devfeed.tech/tags/layout.md>), [visibility](<https://devfeed.tech/tags/visibility.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

The article explains how scrollbar appearance can change available content width and cause layout shifts. It recommends using the CSS scrollbar-gutter property to reserve scrollbar space and keep layouts consistent when content overflows or visibility changes.

## Source excerpt

When a webpage's content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content visibility, as the presence or absence of the scrollbar alters the available width for content.