Hiding scroll bars while maintaining scroll functionality in modern browsers

Josh Sherman
2 min read
Software Development CSS

As I’ve been rebuilding my social network from the ground up recently, I’ve been extremely mindful of the fact that 60% of my users are experiencing the site on a mobile device, specifically phones.

Because of this, I’ve been attempting to craft a user interface that functions nearly identical on desktop as it does on mobile. More of a “mobile only” than a “mobile first” approach. I’d even argue that it’s less about “mobile” and more about “touch”.

I’ve been enjoying the process so much, that I’ve been taking a similar approach with the secret redesign of this site. The redesign that I’ve not only cited would never happen but also have since rescinded.

More on that soon :)

With this heavy focus on touch-friendly user interfaces and more consistency across all devices, I ran into a dilemma. Both mobile and desktop would both have a concept of the hamburger menu (expanded by default on desktop, slide in on mobile), and the content in the menu would exceed the size of the view port.

Great, just make it scrollable!

Not so fast, when making the side menus scrollable, I ended up with multiple scroll bars on the page. One for each side menu and one of the page itself (or the main area, if I made that independently scrollable).

Quite unsightly to have all of these scroll bars floating around, so I set out to get rid of the scroll bars on the side menus while retaining the scroll bar on the page itself, but in my opinion makes sense to retain.

After some research, I found that it didn’t seem like any of the major browser makers were on the same page with this one. Not shocking really, but that meant having to dig a bit deeper into the nuances. It also means that I need to keep an eye on things for a while as there is a high likelihood that things are going to change in the future (hopefully towards a standard).

So here’s what I ended up doing on each of my elements that I wanted to have scrolling capabilities, while not showing any scroll bars:

.scrollable-without-scroll-bars {
  /* M$ */
  -ms-overflow-style: none;
  overflow-y: auto;
  /* Webkit */
  scrollbar-width: none;
}

/* The Fox (newer versions, there's other syntax for older versions) */
.scrollable-without-scroll-bars::-webkit-scrollbar {
  display: none;
}

In my own testing, it seemed to work on every modern browser I had access to, which was good enough for me.

If in the future things do end up ultimately breaking beyond repair, I’ll probably end up implementing some sort of button system to be able to manually scroll up and down. Hopefully it doesn’t come to that.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.