DEV Community

loading...
Cover image for CSS hide scrollbars

CSS hide scrollbars

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

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

Working on a Mac, you hardly see how ugly scrollbars can be, but switching to Windows will show that you can get super ugly scrollbars for side menus, for example.

Scrollbar sidemenu

As you can see, the right-hand scrollbar for the content is fine, that's normal behavior, but the one for the fixes side-menu is a bit misplaced and not nice to see.

On Mac, it's not disturbing since it disappears, but it will always be visible for Windows users, which is not doing our design a favor.

Removing the sidebar

We can luckily remove this sidebar with some CSS magic and not lose its functionality.

Note: please use this wisely since it's a default way to show the user a scrollable area.

In our case, we will add a no-scroll class on the element we want to remove the scroll for.

.no-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
Enter fullscreen mode Exit fullscreen mode

As you can see, we have specific targets for IE and Firefox. The more modern browsers use a pseudo selector, which we can set to display none.

You can view the result in this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (16)

pic
Editor guide
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 Author

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 Author

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
Nikhil M Warrier

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 Author

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
michaelandreuzza profile image
michael-andreuzza

Hiding a scrollbar will bring accessibility issues.

I hate it when I see it...is. you can salways style it to look thinner...

Collapse
dailydevtips1 profile image
Chris Bongers Author

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

Collapse
michaelandreuzza profile image
michael-andreuzza

Well. Accessibility is not a one person decision,is the users decision.

Why?
Well,we are different person. For me the fact of removing a scrollbar on a scrollable div is ike saying that you care more on the design than on the user.

Sure, design is important but if the user can't use it...what's the point of design?

An example, icons8 removed their scrollbar, not even on hover.

You have to click and the arrow down...

What's the point to me the ux more difficult?

I don't see ihe point...( never better said )