{"id":696,"date":"2024-01-31T08:08:41","date_gmt":"2024-01-31T14:08:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=696"},"modified":"2024-02-08T20:47:37","modified_gmt":"2024-02-09T02:47:37","slug":"heads-up-on-custom-scrollbars-chrome-is-supporting-the-standard-now-which-overrides-the-old-pseudo-elements","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/heads-up-on-custom-scrollbars-chrome-is-supporting-the-standard-now-which-overrides-the-old-pseudo-elements\/","title":{"rendered":"Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Overrides The Old Pseudo Elements"},"content":{"rendered":"\n

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<\/code> 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<\/code> and scrollbar-width<\/code>, where were <\/em>(are) standardized. <\/p>\n\n\n\n

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:<\/p>\n\n\n

.custom-scrollbars<\/span> {\n<\/span><\/span>  \/* For Safari, Chrome, and offshoots *\/<\/span>\n<\/span><\/mark>  &::-webkit-scrollbar {\n<\/span><\/span>    width<\/span>: 8px<\/span>;\n<\/span><\/span>    height<\/span>: 8px<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>  &::-webkit-scrollbar-thumb<\/span> {\n<\/span><\/span>    background<\/span>: gray;\n<\/span><\/span>    border-radius<\/span>: 8px<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>  &::-webkit-scrollbar-track<\/span> {\n<\/span><\/span>    background<\/span>: transparent;\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>  \/* For Firefox and offshoots *\/<\/span>\n<\/span><\/mark>  scrollbar-color<\/span>: gray<\/span> transparent<\/span>;\n<\/span><\/span>  scrollbar-width<\/span>: thin<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now that Chrome 121 has dropped to stable, that’s changed. The presence of one of the new properties like scrollbar-color<\/code> overrides the usage of the pseudo elements.<\/strong> 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.<\/p>\n\n\n\n
For instance, the scrollbar-width<\/code> property only really does auto<\/code>, which ends up about 16px across, or thin<\/code> 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.<\/p>\n\n\n\n
As general advice, it’s probably best to transition yourself over to only using the more limited but standardized properties. <\/p>\n\n\n\n
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:<\/p>\n\n\n
.custom-scrollbars<\/span> {\n  \/* Non-Standard, But More Styling-Capable Properties *\/<\/span>\n  &::-webkit-scrollbar {\n    width<\/span>: 8px<\/span>;\n    height<\/span>: 8px<\/span>;\n  }\n  &::-webkit-scrollbar-thumb<\/span> {\n    background<\/span>: gray;\n    border-radius<\/span>: 8px<\/span>;\n  }\n  &::-webkit-scrollbar-track<\/span> {\n    background<\/span>: transparent;\n  }\n\n  \/* Standardized Properties *\/<\/span>\n  @supports<\/span> not<\/span> selector(::-webkit-scrollbar) {\n    scrollbar-color<\/span>: gray<\/span> transparent<\/span>;\n    scrollbar-width<\/span>: thin<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
(Demo<\/a>)<\/p>\n\n\n\n
Looks like Bramus updated a great article on Scrollbar styling<\/a>, showing off the @supports<\/code> method. <\/p>\n\n\n\n