CODEWITHSUNDEEP
htmlcss
sdnts
sdnts

Reputation: 728

Hiding parts of a scrollbar using only CSS

I'm trying to hide specific parts of a scrollbar. My exact requirement is to hide the scrollbar-track-piece, but have the actual srcollbar-thumb visible. (https://css-tricks.com/almanac/properties/s/scrollbar/)

While I'm pretty sure this is not possible, I'm just posting this question here in case I am wrong.

I've tried pointer-events: none, setting display: none and modifying the z-index, but neither seem to be working. I'd prefer not using JavaScript, if possible.

Having it work only in Chrome is good enough for me. (Trying this in Electron)

Thanks in advance!

Use case: I'm trying to make a half-native, half-custom scrollbar, wherein you can click and drag on the scrollbar-thumb to make it behave like scrollbars do, but clicking on the scrollbar-track-piece, isn't possible. I made a little thing: enter image description here

Upvotes: 6

Views: 232

Answers (1)

Hello Dave
Hello Dave

Reputation: 279

You can do this in chrome easily enough using these vendor specific selectors. I'm not sure all browsers support this, but chrome does.

   ::-webkit-scrollbar-track { display: none; cursor: none; pointer-events: none }

You can find all the info you need about css styling of the scroll bar here:

https://css-tricks.com/almanac/properties/s/scrollbar/

However if you really want to create a custom scroll bar that works with all browsers you will need javascript. For now...

Upvotes: 2

Related Questions