CODEWITHSUNDEEP
htmlcssscrollbar
Mad Max
Mad Max

Reputation: 283

Hide scrollbar track but show scrollbar-thumb

Good evening! I just wanna to change my scroll like this. like this

So it looks like that track is hidden. I got my style like this

::-webkit-scrollbar{
   width: 15px;
   height: 40px;
}

::-webkit-scrollbar-thumb{
   background-color: #DBDBDB;
   border: 4px solid transparent;
   border-radius: 11px;
   background-clip: content-box;
}

::-webkit-scrollbar * {
   background: transparent;
}

::-webkit-scrollbar-thumb:vertical {
   height: 90px;
}

And I got such result: result

So there is a question. How can I do this with CSS or JS maybe. Thanks

Upvotes: 5

Views: 4387

Answers (2)

Javier Jerez
Javier Jerez

Reputation: 390

here to save the day, you must first add overflow: overlay; to your body tag, works the same as overflow: auto; but it will be on top of the content instead of on its side.

then just add this:

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

and adjust the color and the width to your liking, your welcome!

Upvotes: 1

kushagra-aa
kushagra-aa

Reputation: 570

I think this might work:

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(,0,0,0.5); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

You might have to edit it according to your need.

Upvotes: 3

Related Questions