How to hide scrollbar track

user_13053782 0
Viewed 2504

is there any way to hide the scrollbar track but not the thumb? It should look like this:

enter image description here

Its currently looking like this:

enter image description here

This is the actual css for the scrollbar:

*::-webkit-scrollbar {
    width: 10px;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
    background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--dark-blue) ;
    border-radius: 20px;
    border: 3px solid var(--custom-white);
}

FINAL CODE:

*::-webkit-scrollbar {
  background-color: transparent;
  width: 15px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 4px solid transparent;
  background-color: rgba(0,0,0,0.2);
  background-clip: content-box;
}

angular scroll scrollbar css html
4 Answers

Just add overflow: overlay; to the body tag instead of overflow: auto. both work the same but with OVERLAY your scrollbar will be on top of content just as you want. Worked for me.

user_154871630

You can just add the background-color property to your ::-webkit-scrollbar and set it to transparent.

::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
    background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--dark-blue) ;
    border-radius: 20px;
    border: 3px solid var(--custom-white);
}

user_141496230

Alright, since i tried everything with CSS and nothing worked, i figured it would be best to use an external package that helped me achieve this very very easily.

I used this library which is suuper super easy to set up and use. All i had to do was install it and use the component. In the wiki they have an example of use and its very noob-friendly and customizable.

user_130537820 
*::-webkit-scrollbar {
    border: none;
    background-color: transparent;
 } /* webkit browsers(safari, chrome) */

*{
    scrollbar-color: #404040b3 transparent; /*firefox*/
 }

This is what worked for me finally.

user_133556320
Related