Please add this tiny bit-o-CSS for stable scrollbar gutters to your Reset Stylesheets
Zach Leatherman 2121 replies 102102 likes2525 reposts11 quote Original on MastodonOriginal on BlueskyAlso posted to Mastodon.
21 replies
`scrollbar-gutter` is great, but I don't know if I'd go so far as to argue that everyone should be putting it in their resets. As far as I'm aware, there's currently no way to put *anything* in the space it reserves, which unfortunately makes it awkward to use with some pretty common layouts
There’s still some discussion on how viewports should behave in this case.
What the WG did resolve on – but this hasn’t been implemented anywhere (😔) – is that top layer content (such as a modal dialog and its backdrop, or a fullscreen video) can draw on top of the reserved space.
Yeah adding the stable scrollbar gutter then not allowing the dialog backdrop to flow over it feels criminal 😅
I’m now noticing this on my open graph images 😅
Curiosity - what layouts do you mean? The site layouts I see daily would not be hindered/made awkward by having space reserved for the vertical scrollbar. The only way I can see that being an issue is if the layout is a side-scrolling layout, but I haven't seen one of those in years.
Any layout with elements that are meant to span the whole width of the (scrollable) container will run into this problem. Navbars, list dividers, etc.
Things like backdrops for dialogs are also affected, but I guess you could argue those are less of a big deal.
-
oh that :where cut-the-mustard is interesting
As long as you don’t go for `scrollbar-gutter: stable both-edges`, you should be fine.
Reason: Chrome has a bug in which the gutter is doubled up on “retina” devices: issues.chromium.org/issues/40064...
(The bug is assigned, and I heard engineering will look at it next quarter)
I just... can't... do it.
Fair! Love the is-scrollable query!!
Are you sure about that 25px scrollbar width 😅
I've been using inches is that wrong?
as long as it isn’t CSS-in-JS I think you’re good
I am not haha
Folks can feel free to steal this (unfortunately JS) solution to calculate obtrusive scrollbar widths! github.com/zachleat/lin...
(originally from www.filamentgroup.com/lab/scrollba... !)
"there is no way I’ve found to make it not a white, or dark-in-dark-mode, bar"
I think it is dark if you've used color-scheme for your dark mode.
But yeah even when the scrollbar was already there and just lost the moving bit, it sticks out so much when it's plain and empty and useless.
Would be good if it would just take on whatever background or backdrop colour is already there, or if you could style it with the track part of scrollbar-color. But I guess it's technically not a scrollbar or a track at that point.
Using it here for when the sidenav expands beyond the height of the viewport, including some custom styles to make the scrollbar look more Mac-like. pitviper.turquoise.health
Oh, actually it requires some additional scrollbar styles that aren't evident in dev tools. 😅
Was going to say, it seemed a bit simple!
But this is within the page rather than at the very-right edge of a website, so I guess maybe doesn't have the same issues with the gutter just staying white or black?
Here' it's white with 25% opacity. You could probably set the color as a custom prop and flip it for light/dark mode? I didn't bother to implement it on the main panel. 😂
