Scrolling on Mobile

Scrolling on mobile devices is quite a different proposition than scrolling with a mouse and keyboard. The user touches the screen with one finger and flicks up or down to move the page. It works well when your entire page scrolls. It doesn't work quite so well when you only want a portion of your page to scroll.

I became aware of this issue through a completely separate problem. The mobile version of the company booklet I'm working on needs to have a navigation/options bar fixed at the top of my page. The rest of the page should scroll.

Reading this article, I almost gave up hope. However, a thought occurred to me that I can't find in the article. Place the navigation bar at the top, width 100%. Then place a content box in, with

position:absolute;
top: (height of the navigation bar)
bottom:0;
width:100%;

It can't scroll, because it ends at the bottom of the screen exactly. Then, set the content box to have overflow:scroll. This lets you scroll it with a single fingered touch, the same as you'd scroll the entire page. To the user, it looks like the entire page is scrolling except for the fixed navigation bar at the top.

A perfect solution, right? Not exactly.

Turns out that while this does work perfectly on iOS 5, it doesn't work on previous versions of iOS, or on Android 2.3 and down. Works on Android 3 and 4, but so few phones are getting upgraded, that doesn't help. So what do we do to fix it? Turns out there's a great javascript solution already full devised, by Chris Barr. He wrote up a nifty little write up explaining it, and when I tried it out, it worked almost perfectly.

There is a problem with green outlines, and I can't really be more specific than that. I don't have an Android 2.3 phone, I've been having a friend test the page I'm working on, and text me back problems, and she says there's a green outline that appears, and then stays fixed on the screen, ignoring the scrolling. More details when I get them.