Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Over...
source link: https://frontendmasters.com/blog/heads-up-on-custom-scrollbars-chrome-is-supporting-the-standard-now-which-overrides-the-old-pseudo-elements/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Overrides The Old Pseudo Elements
January 31, 2024
There was quite a long period of time (say 2011-2024) where if you wanted to style scrollbars in CSS, your best bet was using the pseudo elements ::-webkit-scrollbar
and friends (there were about 7 of them). That got you custom scrollbars in Safari and Chrome and offshoots. Firefox never supported those. They were never really standardized. But around 2018, Firefox started supporting scrollbar-color
and scrollbar-width
, where were (are) standardized.
These two groups of selectors didn’t interfere with each other, because browsers either supported one or the other. So for a bunch of years there, you could safely do something like:
.custom-scrollbars {
/* For Safari, Chrome, and offshoots */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background: gray;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
/* For Firefox and offshoots */
scrollbar-color: gray transparent;
scrollbar-width: thin;
}
CSS
Now that Chrome 121 has dropped to stable, that’s changed. The presence of one of the new properties like scrollbar-color
overrides the usage of the pseudo elements. So if you were styling like the above, all the sudden it’s likely that your scrollbars looked a bit different, because the styling possibilities are much more limited with the standardized properties.
For instance, the scrollbar-width
property only really does auto
, which ends up about 16px across, or thin
which is 16px across. If you were doing super chunky scrollbars that went bigger than that, you’d see them get smaller. If you were doing super thin scrollbars, which may have looked more visually appropriate in constrained areas (although likely an accessibility issue), you’d see them get bigger.
As general advice, it’s probably best to transition yourself over to only using the more limited but standardized properties.
But if you’d like to stick it out with fancier but not standardized pseudo elements, you’ll need to ensure the new standardized properties do not apply in browsers supporting both (Chrome). So you could do:
.custom-scrollbars {
/* Non-Standard, But More Styling-Capable Properties */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background: gray;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
/* Standardized Properties */
@supports not selector(::-webkit-scrollbar) {
scrollbar-color: gray transparent;
scrollbar-width: thin;
}
}
CSS
(Demo)
Looks like Bramus updated a great article on Scrollbar styling, showing off the @supports
method.
Read that article for a couple of other nuanced little bits (with work arounds) like:
Note that setting the
width
orheight
of::-webkit-scrollbar
will force render an overlay scrollbar, effectively turning it into a classic scrollbar.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK