Day 25: scrollbar gutters in body and html
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.
So I tried this…
…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.
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
scrollbar-gutter used on
<html> are propagated to the viewport.
See on CodePen.