Smooth scrolling divs on mobile

I've been working on a new version of this blog and wanted to make a custom responsive menu for the mobile view. I've made a lot of these on native apps, and I wanted to recreate that native feeling in JS & HTML5.

My first thought was simply hiding the main container and popping in a div with a list element. This works splendidly on desktop browsers, but it absolutely doesn't work on mobile webkit browsers (primarily iOS). What I wanted was smooth, reactive scrolling. What I got was jitters and lags.

So what to do? Turns out, there's a nice solution to be found in form of a CSS hint called overflow-scroll. Adding this solved the problem neatly.

So why isn't this a default behavior? Well, for one, it uses hardware features to achieve the effect, which means heavier battery usage. Second, certain position like relative or absolute attributes may cause misrendering, especially when scrolling horizontally. Think image carousels, horizontal sliders and the like. With vertical lists, you're fine.

Here's the CSS code for reference:
.responsive-list{
  -webkit-overflow-scroll: touch;
  overflow-scroll:touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
comments powered by Disqus