How can you minimize cumulative layout shifts using the CSS scrollbar-gutter property?

Navigating between web pages on the same website that both have and do not have scrollbars causes the content to make a small jump to the left. It’s mostly a non-issue, but it’s noticeable and kind of annoying. And since it’s easy to prevent using CSS, you might as well implement a solution to prevent unnecessary cumulative layout shifts on your website for a slightly better user-experience – it’ll help with SEO, too.

Cumulative Layout Shifting

Cumulative layout shifts (CLS) happen when website page content shifts as a page is loading (or changing, refreshing, etc.). Sometimes, it’s not a big deal. Web pages need to load their content, right? Other times. layout shifts are undesirable shifty behavior that results with you clicking on something you didn’t intend to. CLS can happen because of slow loading content, swapping from a page with short content that doesn’t require scrolling to a page with tall content that does require scrolling, asynchronously loaded content that adds page height after a page loads, intrusive ads, and more. A concrete example is most every single food recipe blog you’ve ever clicked through to from Pinterest – there’s fast loading content, large slow loading images, ads that come in late, video pop-overs, and subscriber pop-ups all happening on the same page that cause shifts in the layout.

The repeating offender of CLS we’re covering in this article is navigating from a page with a scrollbar to a page without a scrollbar.

Scrollbar Shifts

On average, the space a scrollbar takes up in your web browser is 17px (wide). 17-pixels isn’t going to make your content shift in astronomical proportions, but it’s definitely noticeable. Navigating from a page without a scrollbar to a page that requires a scrollbar makes everything on the page jump a few steps to the left. It’s not necessarily a bad user-experience, but it’s not the best user-experience either.

Improving user-experience is always a good thing.

Force Scrolling with More Content

One way to prevent scrollbars causing cumulative shifts in page layout is to always force scrolling.

Having tall enough content on every page will force a scrollbar. If a scrollbar is always present then it’s never not present, and therefore, will never cause a shift in page layout. The downside of this approach is that not every page on your website may have enough content to require vertical scrolling, so it creates a situation with forced vertical scrolling that feels weird – and weird isn’t exactly the type of word you associate with “good user-experience.”

Force Scrollbars with Gutters

Another approach is to force the visual display of a scrollbar. You can do this by showing the scrollbar gutter and it doesn’t matter if your web page has a lot of content or not. The scrollbar gutter is the area that contains the scrollbar – not the actual scrollbar; just the container – it’s the gutter.

Utilizing the scrollbar gutter is more palatable approach to scrollbars on every page.

Force Scrollbars with Scrollbar-Gutter

In theory, there’s an aptly named CSS property called scrollbar-gutter.

body {
    scrollbar-gutter: always;
}

Scrollbar-gutter allows you to assign the space for a scrollbar – the gutter – without requiring the scrollbar to be active. That means you can have a scrollbar without scrolling.

Problem solved! Right? No more 17px pixel content jumps to the left.

Well, yes and no. The problem would be solved if the scrollbar-gutter property could get widespread adoption from web browsers, but technology hasn’t quite advanced that far. The people that make those types of high-level decisions are definitely thinking about it – it’s spec’d out – but at this time there is barely any browser support for it, so it’s not really a usable property, so much as a progressive enhancement that you can add to your stylesheets and cross your fingers that it’ll work sometime in the future.

For more in-depth reading about scrollbar-gutter check out this article from CSS-Tricks.

Force Scrollbars with Overflow-Y

Setting the CSS property overflow-y to visible is another way to achieve a visible scrollbar gutter without require scrolling.

body {
    overflow-y: visible;
}

According to caniuse.com, overflow-y has a lot more browser support. Robust browser support makes overflow-y a feasible option for use in production (i.e. real world websites!).

Using this approach, you can reliably solve the issue of cumulative layout shifts caused by the sudden appearance of scrollbars on websites featuring pages with both short and tall content.