Day 25: scrollbar gutters in body and html

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

When I wrote about the scrollbar-gutter property, my first thought was “omg! I'll put this in my reset stylesheet and use it on the <body> by default”. I wanted to do that in order to prevent the page from “jumping” when switching from a long to a short page, a page with overflow to one without.

Here's a quick demo to illustrate the issue.

When switching from a page with a scrollbar to a page without, you can see how the whole page shifts to the left because the scrollbar takes up space on longer pages.

So I tried this…

body {
  scrollbar-gutter: stable;
}

…and it didn't work.

I looked at the spec and there it says:

However, unlike the overflow property, the user agent must not propagate scrollbar-gutter from the HTML body element.

So, overflow on the body is propagated to the viewport, which absolutely makes sense. Just try to set a width on the body with a lot of content, you'll see how the width changes, but the scrollbar is still on the inline end of the viewport.

If I understand correctly, scrollbar-gutter has no effect on the body because overflow is propagated to the viewport, but scrollbar-gutter isn't. If there's no overflow, then there's no scrollbar gutter. It kinda makes sense to me. (Please correct me if I'm wrong. :))

When I moved the declaration to the <html> element, it worked! That's because both overflow and scrollbar-gutter used on <html> are propagated to the viewport.

html {
  scrollbar-gutter: stable;
}

See on CodePen

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS