Preventing the scrollbar from changing the layout of a web page

You've surely noticed, but the appearance of a scrollbar in a page (or a component) on the web can sometimes have an impact on the organization of the latter.

This can even change the line breaks of a text while it's being read, resulting in a negative impact on the user experience.

By default, even when an element is defined with overflow: auto, no space is reserved for the scrollbar, and the content is simply shifted when it appears.

Fortunately, a new CSS property scrollbar-gutter has appeared to fix this issue and has three possible values:

• auto (default)
• stable
• stable both-edges

Here's an example of its use:

p {
  padding: 10px;
  height: 75px;
  width: 250px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

The result? The scrollbar's space is reserved even when it isn't displayed yet, which reduces the visual changes to the page and its text, like this:

Be careful, the difference depends heavily on the browser's scrollbar implementation.

On some, the scrollbar is very thin and the difference is almost invisible!

The both-edges variant

Keeping the same layout is good, but it comes with a small visual flaw…

When using the stable value, as long as the bar isn't visible, the result simply appears with extra space on the right of your element, as if your padding were 15 pixels larger on the left than on the right.

The design then quickly becomes "unbalanced"

That's why we can add the both-edges option, like this:

scrollbar-gutter: stable both-edges;

This will add the same space on both the left AND the right to rebalance the margins.

A positive impact on SEO

One might wonder what influence a visual option could have on SEO…

And yet, it's not negligible.

Since its latest versions, Google's ranking algorithm applies a penalty to pages with too high a number of "Cumulative Layout Shift" or "CLS."

This figure simply represents the number of times a web page changes its layout while loading, until its "final" display.

The appearance and disappearance of a scrollbar is counted among these "layout shifts"

Using the "scrollbar-gutter" property helps reduce this figure, and therefore improve one's ranking (or rather avoid lowering it).

Property compatibility

The only downside of this solution is that it isn't yet perfectly compatible with all browsers…

In reality, all modern browsers have implemented this CSS property, except Safari.

But good news, it's possible to enable it manually in the latest versions, which means it's also on the roadmap for upcoming versions!