Styling Scrollbars?

I want to style the scrollbar on my site like this one. Note the side content area on the left side of the viewport (Desktop only). I tired to copy the css via inspector, but I cannot find it.

How do I make the scrollbar disappear until the cursor is in the field, and also change the width/radius
?

Hi there jeremy58,

my guess is that it is jQuery driven, as the scrollbar
disappears altogether when javascript is disabled.

Here, though, is a simple CSS example…

Full Page View
https://codepen.io/coothead/full/poEdBmb

Editor View
https://codepen.io/coothead/pen/poEdBmb

As for the scrollbar styling…

https://duckduckgo.com/?t=lm&q=CSS+scrollbars&ia=web

coothead

1 Like

You can style the scrollbars on webkit with some custom properties but i doubt you’ll do a good as job as the standard ones.:slight_smile:

Some browsers actually do this already (such as Firefox on a mac) but it can be awkward to spot which areas are scrollable.

Generally for scrollbars you are best leaving them alone as people will be used to the normal behaviour on the browser they use. :wink:

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.