Question 331459 in CSS Question posted in
Some basic documentation can be found here.

Css – Scrollbar style is not working after the new Chrome update?

I have the following code that stopped working after the new Chrome update. How can I achieve cross-browser scrollbar styling?

// Note: Shared Scrollbar Style
const scrollbarSharedStyle = {
  scrollbarColor: `${themeLayers.scrollBar[0]} ${themeLayers.scrollBar[1]}`,
  '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
    width: 12,
  },
  '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
    borderRadius: 6,
    backgroundColor: `${themeLayers.scrollBar[0]}`,
    minHeight: 24,
    border: `2.5px solid ${themeLayers.scrollBar[1]}`,
  },
  '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
  },
};
Tags:

2

Answers


  1. 0

    You need to find the css "scrollbar-width" and "scrollbar-color".
    Don’t apply them to Chrome.

    You might consider

    @supports(-moz-animation-delay: 0) {
 .my-element {
   scrollbar-width: thin;
  }
}
    Login or Signup to reply.
  2. 0

    Chrome 121 update included the support for scrollbar-width and scrollbar-color properties, which, when used, disable ::-webkit-scrollbar type of properties, according to MDN Docs.

    MDN note

    The fix is to wrap the use of scrollbar-width and scrollbar-color with @supports not selector(::-webkit-scrollbar) {}.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search