It is still possible to style the -webkit-scrollbar-* pseudo elements in Chrome 121+. However the now supported spec-compliant properties scrollbar-color and scrollbar-width take precedence over the properties of these pseudo elements. With the limited styling options that these spec-compliant properties offer (at the moment) it is advisable to only use them when the ::webkit-scrollbar selector is not supported:

.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;
  }
}

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

• We build a solid first version of your product
• We train your development team
• We rescue your project in trouble

Read more Show archive.org snapshot