Scrolling in your HTML5 App

Reading time ~1 minute

For my last app I ran into the problem of scrolling an area within an HTML5 App while other areas, for example the header remains at a static position. There are a couple options:

I started with iScroll which seems to be the most popular option but ran into major troubles and headaches with it. Digging into the topic, I found Scrollability, which is unfortunately not maintained any more (last commit 2 years ago?). And including a major framework into an existing App just for scrolling was kind of using a sledge-hammer to crack a nut. Since the App is supposed to run on iOS first, I figured I’ll try the native way: -webkit-overflow-scrolling: touch.

However, this is also kind of tricky. Here’s what you need:

Change UIWebViewBounce in your config.xml to false:

Unfortunately, the height of the wrapper is 50px too short, the height of the header. The only solution I found was resizing the height with some JavaScript.

This can be done after rendering, for example with mustache.js.

Europe on Two Wheels

![Iron 883](/images/2015/07/IMG_7368.jpg)## Barcelona (Spain) - Le Dramont, Cote d'Azur (France)> 648km![Le Dramont](/images/2015/07/IMG_...… Continue reading

Updates!

Published on September 10, 2014

HTML5 vs. Native [thoughts]

Published on February 26, 2014