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.
