DEV Community

Cover image for CSS hide scrollbars

CSS hide scrollbars

Chris Bongers on February 22, 2021

Today we will be hiding scrollbars with CSS! As much as I love browser native behavior, there are use-cases where one would want to make an invisib...
Collapse
 
lexlohr profile image
Alex Lohr

You should be conscious that hiding the scrollbar means that you hide information from the user, which can be bad UX. In case the user does not know there is content below the fold, they will likely never search for it. That can be fixed by giving a sticky indicator of following content if a scrollbar would have been shown (either by media query or with JS).

Collapse
 
dailydevtips1 profile image
Chris Bongers

Agreed, however there are certain use-cases in my opinion like shown here where it can be valuable.
It's also a matter of design/client wishes, but I would say here we can safely remove it.

Collapse
 
lexlohr profile image
Alex Lohr

If a client wants us to implement a bad UX, its our professional duty to help him make an informed decision on that. To say, "we don't have customers who have an issue with that" actually means "those who have an issue with that are not our customers".

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Well there is bad UX and just ugly default browser shit

I really don't feel bad hiding a scrollbar for a side menu that is a mere 50px wide.
If they asked me to remove the general scrollbar, agreed.

Thread Thread
 
lexlohr profile image
Alex Lohr

I would just advise them to add a small sticky indicator that there is more content below the fold and then hide the scrollbar as a fix to the UX issue, like I mentioned before. That may not be neccessary in every case, but in the one you showed, it would be rather useful.

Thread Thread
 
nikhilmwarrier profile image
nikhilmwarrier

Maybe some light inset shadow with js? Or a very thin scrollbar using pseudo selectors...
Or clip some content in such a way that the user would know there's scrollable content...

Collapse
 
graemechapman profile image
Graeme Chapman

What about users who don't have a mouse wheel?

Collapse
 
devingoble profile image
Devin Goble

Even with a mouse wheel, for anything more than a screen or two of information, I prefer to grab the scroll bar and manually move it to where I want. I hate it when site or apps use a skinny scroll bar, because it makes it a more difficult click target. Honestly, I've never used a site that used custom scrollbars that I was happy to see, for this reason, and the others that are in this thread.

I guess it all comes down to the designer changing what should be an operating system or browser style choice. I'm going to use the application for a few minutes, but I use the OS for hours. Everything within the scope of the application is up for grabs, but when you change how I expect the container for the application to look and feel, then it gets annoying. This includes scroll bars and mouse cursors in web application, custom title bars and window controls in desktop applications, and various other tweaks.

Collapse
 
weedshaker profile image
weedshaker

I once made a flash picture viewer, where the picture scrolls by the location of the mouse pointer. I would do the same here, mouse pointer at top === scrollTop an vice versa to bottom. Still I would have to test it before I could agree that it is a usable pattern for buttons.

Collapse
 
gracesnow profile image
Grace Snow

In this particular example, those are a list of links, so keyboard would work fine.

And as long as there's a little non-interactive space, click n drag with a non-wheeled mouse.

Collapse
 
gracesnow profile image
Grace Snow

I come up against this a lot since moving to mac where I don't realise there is more content hidden. I'd probably rather have the scrollbar, unless there's a micro-animation (think small chevron bounce or something) to give me another visual queue to try scrolling

Collapse
 
dailydevtips1 profile image
Chris Bongers

Working on mac for a long time, I really don't see any issue with it.
Phones are more than 50% of the web, and they don't offer it unless you do an action and people seem to know that.

I often think it's what we read should be the standard, but from UI/UX is not even a proven result.

Although do mean use it wisely and not remove all scrollbars.

Collapse
 
dailydevtips1 profile image
Chris Bongers

I don't fully agree, for multiple reasons.
It's accessible since it's buttons so screenreaders/tabs will work.

I also think people these days know where to expect content.
Don't get me wrong, only use it wisely and not often.
But for me, some cases can do with it.

And of course styling it is the best solution, see my latest article on that:
daily-dev-tips.com/posts/styling-s...