Pull to refresh using overscroll and touch events

document.body.scrollTop: 0px

release to refresh... refreshing...

Naive demonstration of the most basic pull to refresh implementation.

Pulling down and releasing beyond a certain threshold will trigger a refresh (in this demo, nothing actually refreshes, but watch the output above for some basic status indication to mimic this).

It relies on browsers (mainly Safari/iOS) that "overscroll" – allowing users to scroll down even when they're already at the top of the document – and the fact that touch events fire even during scrolling.

This implementation doesn't work universally, as not all browsers overscroll – some even trigger their own "pull to reload" functionality instead (such as Chrome/Android).