JavaScript Pull to Refresh for the Web

Across many native mobile apps you’ll see an interaction that allows you to pull down a list to refresh its contents. This is commonly know as “pull to refresh”, and I set out to try and build a native-like JavaScript equivalent for the web.

There are a few solutions already out there if you try a quick Google search, but many of them don’t feel quite right. They aren’t close enough to the performance and responsiveness of a native app implementation.

In order to get a more native-like level of performance I used some of the same CSS and JavaScript techniques that I wrote about when building the smooth sliding mobile menu. Combine that with the really awesome touch event library called Hammer.js and you’ve got the base for a great pull to refresh implementation.

There’s no crazy nested markup for this to work, it’s a very simple setup. It supports native scrolling, and it will work across all modern browsers on both the desktop and on mobile devices.

If you’re interested in using it in your next project, I’ve included all of the implementation details in the Github project readme. If you want to give it a spin, check out the demo implementation in your favourite browser or mobile device.

View on GitHub | Try a Demo

Published by Andy Peatling

Automattic Inc, open source contributor, and bogey golfer.

Join the Conversation

8 Comments

  1. Great example , thank you for your sharing. I also need an example to pull up to load more , which is widely used in many native apps. Can you give me a help. Thanks!

  2. Vertical Scroll Stops if the content is more than the browser layout. only pull to refresh happens normal scrolling stops

Leave a comment

Leave a Reply