This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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…
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;
}
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-28T09:38:54+00:00) Day 25: scrollbar gutters in body and html. Retrieved from https://www.scien.cx/2022/10/28/day-25-scrollbar-gutters-in-body-and-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.