Scrolling in mobile Web-Apps

Tim Buschtoens
July 30, 2012 | 2 min Read

I love Android, but its default browser is terrible. For relatively simple, static websites it’s okay, but i’m talking about complex HTML(5)/JavaScript applications here. And while Safari for iOs is considerably faster, it’s has almost as many quirks and bugs.  A great alternative to native apps or Flash this ain’t (yet).

My frustration comes from one specific topic I had to deal with, and that’s scrolling within an HTML element. If you want the fancy, natural feeling scrolling with momentum, you can enable it in Safari using css: “-webkit-overflow-scrolling: touch". It has a few issues though:

  • You may have to fix some rendering glitches as a result.
  • It’s not possible to allow scrolling only horizontally or only vertically.
  • It’s only enabled in iOs 5 or later.

In Android 3+ browsers,  scrolling with momentum is enabled by default, but it’s even more broken:

  • The scrollLeft/scrollTop properties are completely ignored
  • No scroll events are fired.
  • Sometimes (not sure what the exact conditions are), the element scrolls farther than it should be possible, i.e. to where no content exists. It then also jumps around wildly.

I have not thoroughly tested Chrome and other mobile browsers, yet.

Of course, resourceful web developers already recognized and “fixed” the problem with JavaScript libraries for scrolling, iScroll being one of them. It’s working very well overall, but elements with a  lot of content may render painfully slow on some Android devices.

Still, it’s better than not being able to scroll at all, which is currently the case for Eclipse RAP on Android. For that reason I’m working on an add-on that integrates iScroll with RAP. (Currently it’s only used in Android browsers, but it can also be manually activated on iOs). You need the current nightly build of RAP if you want to test it, the add-on is targeting RAP 2.0.

Also, if you want the real deal, Tabris will be able to run RAP applications on Android with a much smoother user experience, including touch-scrolling. Learn more about Tabris from our blog.

Tim Buschtoens