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:
By default, the <textarea> element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up and down. We need to set the CSS overflow property to "hidden" so as to hide the scrollbar.
Scrollbar Selectors For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.
1. Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With