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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)