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