Search code examples
htmlcssangularscrollscrollbar

How to hide scrollbar track

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;
}

Solution

  • Accepted answer is not correct anymore, and was already misleading year ago when it was posted.

    Overlay was NOT part of official CSS specification. I was supported only by webkit engine, was later deprecated and eventually REMOVED. Currently overflow: overlay acts as auto so it should NOT be used.

    According to Can I Use, current support is only 8%, and will be decreasing.

    Now correct answer will be - it is not possible to achieve this effect with pure CSS, because there is no such properties for overflow or webkit-scrollbar.

    If someone really needs that - JS must me involved. Of course there are ready to use libraries like Simplebar.