Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hiding parts of a scrollbar using only CSS

Tags:

html

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

like image 877
siddhant Avatar asked Oct 04 '16 12:10

siddhant


People also ask

How do I hide a textarea scroll?

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.

How do I customize my 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.

How can I hide scrollbar in iframe but still scroll?

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).


1 Answers

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...

like image 166
Hello Dave Avatar answered Nov 13 '22 03:11

Hello Dave