Question 277539 in Html Question posted in
Some basic documentation can be found here.

Html – React – How to make the scrollbar track transparent on google chrome

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

Tags:

2

Answers


  1. 0 
     1. you are using a black theme in your project, so if you give transparent it won't work, 
 2. you need to give a black color instead of transparent color
 3. simply change your code like this
::-webkit-scrollbar {
  width: 0.5vw;

}

::-webkit-scrollbar-track {
  background-color: balck; <!--here you need to update-->
}

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

}
    Login or Signup to reply.
  2. 0

    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 :) 
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search