In Chrome 121+ the now supported spec-compliant scrollbar properties override the non-standard `-webkit-scrollbar-*` styles

Updated . Posted . Visible to the public.

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
Example in Chrome 120 Example in 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.

Arne Hartherz
Last edit
Fabian Schwarz
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2024-02-06 13:04)