React - How to make the scrollbar track transparent on google chrome

Question

::-webkit-scrollbar {
  width: 0.5vw;

}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

I made this code for a scrollbar in css and the scrollbar works, but for some reason that I don't know the scrollbar track isn't transparent on chrome.

i get that : no transparency track scrollbar

But i want this result (transparency) : expected

Answer 1

Can you please try adding !important to the relevant place regarding changing only the background, as the code seems to be correctly structured like below it's looks like your body background

 ::-webkit-scrollbar-track {
  background-color: transparent !important;
}

and if you have the multible them You need to switch theme like

.dark{
   background-color: #303030;
 }

 html.dark::-webkit-scrollbar-track {
   background-color: black; // or what color do you want to use :) 
 }