JavaScript Pull to Refresh

After seeing Leah Culver’s blog post entitled “iPhone Pull to Refresh“, I was disappointed when I clicked through to find out that it was an ObjC library and not a javascript library. So I set out to see how hard it would be to replicate the UI pattern in javascript.


DEMO | javascript source

This is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite.

To implement the UI pattern properly, javascript must take over the browser’s default scrolling functionality. Any touch javascript framework already does this (PastryKit, jQtouch, etc). Mobile browsers block rendering when the user is scrolling so exposing the “Pull and Release to Refresh” hint is impossible. This limitation also makes it difficult to develop a plug and play javascript library because each framework handles scrolling differently.

This code works on iOS/iPhone and Android. Please don’t abuse this UI pattern too much. :)