0

How can I implement pull to refresh for iOS in HTML for a horizontal list?

That is, a list that scrolls horizontally, but when you pull it to the right it reveals a hidden div that can trigger a javascript callback?

Michael Celey
  • 12,645
  • 6
  • 57
  • 62
cgenco
  • 3,370
  • 2
  • 31
  • 36

1 Answers1

-1

I think I've worked out a solution, but it has the odd characteristic of hiding the .pull-to-refresh span if I position it completely to the left of the scrolling content. If I position it 1px shy of all the way, however, it works fine.

Here's the pastebin of my horizontal pull to refresh solution. Note that this only works on browsers that support -webkit-overflow-scrolling: touch, like those on iOS devices. You can load just the result of the jsfiddle on a mobile device here: http://fiddle.jshell.net/mhBd2/show/

Is there a better way, or did I discover a webkit bug?

For anyone else along this path, this was part of a bigger solution to get a horizontally scrolling list to dynamically fill the rest of a line (like How to make an inline-block element fill the remainder of the line?), which I got working here: http://jsfiddle.net/fuWcr/

Community
  • 1
  • 1
cgenco
  • 3,370
  • 2
  • 31
  • 36