Up until Chrome 120, scrollbars could only be styled using the various -webkit-scrollbar-* pseudo elements, e.g. to make the scrollbars have no arrows, be rounded, or with additional margin towards their container.
Starting with
version 121
Show archive.org snapshot
, Chrome now also supports the spec-compliant properties scrollbar-width and scrollbar-color.
These allow less styling. You may only specify the track and thumb colors, and a non-specific width like auto, thin, or none.
.example {
scrollbar-width: thin;
scrollbar-color: blue lightblue;
}
Styling the -webkit-scrollbar-* pseudo elements is still supported by Chrome, however the new spec-compliant properties take precedence over the properties of these pseudo elements.
This leads to a lot of scrollbars looking bad after updating to Chrome 121+, as the properties scrollbar-width and scrollbar-color are widely used in a lot of projects to provide some sort of styling for Firefox (which never supported the non-standard -webkit-scrollbar-* styles) that are ignored by older Chrome versions.
Examples (you may also check https://codepen.io/foobear/pen/KKEBPVp Show archive.org snapshot yourself):
| Chrome 120 | Chrome 121 |
|---|---|
As the spec-compliant scrollbar properties do not provide a lot of ways to style your scrollbars for now, it might be best to only use them in Browsers that don't support the non-standard scrollbar styling with -webkit-scrollbar-* by using @supports selector():
.example::-webkit-scrollbar {
width: 1rem;
height: 1rem;
}
.example::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: .5rem;
}
.example::-webkit-scrollbar-track {
background-color: lightblue;
border-radius: .5rem;
margin: 1rem; /* applies only to scroll axis */
}
@supports not selector(::-webkit-scrollbar) {
.example {
scrollbar-width: thin;
scrollbar-color: blue lightblue;
}
}
That way everything should look like before.
Alternatively you can implement a
scroll indicator
Show archive.org snapshot
using pure CSS with animation-timeline (although user's won't be able to click and drag to scroll), or resort to some kind of JavaScript solution.
