Open sarazhang123 opened 7 years ago
There is no W3C spec for it. So we don't know how unprefixed selectors will looks like.
There now is a Working Draft for this specification and it shipped in Firefox 64, here's the relevant MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
Only supports scrollbar width and color of the track and the thumb for now.
So we might want to explore this topic again – shall we open a new issue for this? (or reopen this one?)
@jonaskuske sure. I need:
@ai In which format should that table be?
@jonaskuske just post comment in this issue with official selector
→ webkit selector
for information, there is ongoing work on this here : https://github.com/pascalduez/postcss-scrollbar
@ai
I need:
- PR to Can I Use with support data.
https://caniuse.com/#feat=css-scrollbar https://github.com/Fyrd/caniuse/blob/master/features-json/css-scrollbar.json
- Table of unprefixed to prefixed selectors.
This is the longest standing open issue. How do you feel about if we start this off small and simple to address the (probably [1]) most common use case: hiding scrollbars while keeping overflowing containers scrollable? If yes we could open a separate issue for this.
[1] Comparison "hiding scrollbars while scrollable" has more than double the views than "customizing scrollbars": https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div
Based on: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
/* input */
.selector {
scrollbar-width: none;
}
/* output */
.selector::-webkit-scrollbar {
display: none;
}
.selector {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* input */
.selector {
scrollbar-width: auto;
}
/* output */
.selector::-webkit-scrollbar {
display: initial;
}
.selector {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
Notes on the examples:
::-webkit-scrollbar
doesn't have designated properties, so developers wanting to hide this could do width: 0; height: 0;
or visibility: hidden
instead of display: none
so I'm not sure how you would deal with that.scrollbar-width: thin
as it doesn't have any corresponding vendor-specific styles. It could perhaps map to the output of the "Resetting scrollbars" example as it does indicate the presence of scrollbars.@Malvoz my current worries:
Because of these reasons, I do not want to do it on my own. But I will help you make a pull request and will accept and release it.
From my experience with postcss-scrollbar
and also custom overrides that we have in production now, we might need/want this to be quite configurable. For instance styling or hiding in OSX makes less sense, since they already have "nice", "hoverable" scrollbars (depending) on user config.
This user config is not readable from a browser, as far as I know.
Also the system defined width applied to the thin
keyword is not readable/retrievable, so we make lots of guessing at the end.
Will this be postponed until browser-support is better? Or is this stale?
I use
grunt-postcss
to generate css prefix.Configuration as follows:
Sass as follows:
But, autoprefixer cannot generate prefix for
scrollbar-xxx
, such as-webkit-scrollbar
,-webkit-scrollbar-thumb
,-webkit-scrollbar-track
. It is a bug or it is my wrong configuration?