Jump to content

Scrollbar CSS stopped working in Chrome 121 update


Go to solution Solved by Happy2Play,

Recommended Posts

cochize1
Posted

Hi, my scrollbar styling stopped working after a Chrome update to 121 and my current code below does nothing anymore. Does anyone know a fix for that?

@Happy2Play @visproduction

::-webkit-scrollbar {width: 4px !important; height: 0px !important;}
::-webkit-scrollbar-track { background: rgba(82, 181, 75, 0.0) !important;   width: 4px !important;}
::-webkit-scrollbar-track:hover { background: rgba(82, 181, 75, 0.1) !important;  width: 4px !important;}
::-webkit-scrollbar-thumb {   background: rgba(82, 181, 75, 0.2) !important;   border-radius: 4px !important;}
::-webkit-scrollbar-thumb:hover {background: rgba(82, 181, 75, 0.7) !important;   border-radius: 4px !important;}

 

Happy2Play
Posted

Looks html scrollbar-color is overriding

html {
    color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
    scrollbar-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.4) transparent;
    background-color: hsl(var(--background-hue),var(--background-saturation),var(--background-lightness))
}

So I guess something like this

html {scrollbar-color: auto !important;}
::-webkit-scrollbar {width: 4px !important; height: 0px !important;}
::-webkit-scrollbar-track { background: rgba(82, 181, 75, 0.0) !important;   width: 4px !important;}
::-webkit-scrollbar-track:hover { background: rgba(82, 181, 75, 0.1) !important;  width: 4px !important;}
::-webkit-scrollbar-thumb {   background: rgba(82, 181, 75, 0.2) !important;   border-radius: 4px !important;}
::-webkit-scrollbar-thumb:hover {background: rgba(82, 181, 75, 0.7) !important;   border-radius: 4px !important;}

only tested in edge and chrome.

cochize1
Posted

This seems to work on the all scrollbars except the one in drawer, could you help with that as well?

  • Solution
Happy2Play
Posted
18 minutes ago, cochize1 said:

This seems to work on the all scrollbars except the one in drawer, could you help with that as well?

add

div.scrollY-mini {scrollbar-width: auto;}

 

  • Thanks 1
cochize1
Posted

works great, thanks

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...