Read more

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

Arne Hartherz
February 06, 2024Software engineer at makandra GmbH

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.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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
February 06, 2024Software engineer at makandra GmbH
Posted by Arne Hartherz to makandra dev (2024-02-06 14:04)