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.