Scrolling for iPhone Web Apps

I have created a new iPhone Scroll Demo page. This webpage is a proof-of-concept for scrolling with:

• "low-friction",
• "pseudo-fixed-position toolbars", and
• "rubber-band 'bounce' scrolling" (even when you "you pull down all the way off the bottom [or top] of the display").

I don't know if this is the "best" way, just a way (if I had to start from scratch I'd probably try a few things differently).

This all began because I was reading John Gruber's (of Daring Fireball) discussions about iPhone web apps and PastryKit (here, here). It struck me that what he wanted really wouldn't be that hard to do (for the most part). So I put together this little page. As he noted, I doubt it will scroll as nicely on a non-3GS iPhone (although I was only able to test on my own 3GS). Even on a 3GS, I get occasional hiccups when background processes kick off.

To save time and effort, the page will only really work in portrait orientation when saved to the home screen. I also could have spent a lot more time using HTML5 and CSS3 to make this more web-app-y, but that was not the point of this project. You may also note a few HTML errors when you load - this is my host, not me.

My next task will be trying to get a scroll bar to show (I will likely have to code up a new one). I also had a lot of trouble embedding Google ads (so much so that I removed them on the iPhone), because they live in their own iframes, which handle events differently (and I cannot access them via JS because it comes from a different domain).

Disclaimer: While it just so happens that I do work part-time for Apple Inc., I have not used here, nor do I have, any proprietary information on this immediate subject matter. In fact, I haven't even looked at PastryKit itself (as dug up by John Gruber). I am also a student at Carnegie Mellon University, and this prototype was just a mental exercise; I simply tried create something based on John Gruber's notes and thoughts.

Check out the iPhone Scroll Demo.