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

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.

Copy.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

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():

Copy.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.