Pull to Refresh

APIs
1

I would like to see easy pull-to-refresh behavior find its way into the platform. @briankardell informed me about overscroll-behavior which provides a way to control what happens when the browser encounters a scroll edge. https://drafts.csswg.org/css-overscroll/

Some considerations:

  • Even with overscroll-behavior, when implementing pull-to-refresh yourself you still need to write complex touch event code with CSS transforms to get the effect. This is harder than what is necessary to get pull to refresh on native platforms.
  • If you do implement pull-to-refresh yourself it won’t match the native platform’s look because iOS and Android have different UIs for this. Should it match or should it be consistent across environments? Open question.

I would like to start a group to work towards all of the prerequisites required to get a high-level API for pull-to-refresh. Please let me know if there is implementer interest.

3 Likes
2

/cc @flackr

3

Chrome on iOS has this “built in” and it is useful but it is a custom UI.

4

Hi @PaulmWatson can you explain what you mean? How does Chrome on iOS allow pull to refresh to be implemented?

5

It is something Google built into the chrome of Chrome iOS and is not something you can toggle or interface with from your website.

image
image800Ă—600 41.8 KB

See animation of it here;

6

@PaulmWatson That is refreshing the page. This issue is to allow developers to create pull-to-refresh animations in live pages, like twitter.com does on mobile.

7

“overscroll “ and “scrollend” events will play a role here too.

2 Likes
8

This would also allow to make pull-to-refresh in sub-areas of a page, which could useful in cases like tablets or even touch-screen desktops where more than one scrollable column (or row) can fit in view.

9

Hello, I’m still looking for people willing to engage on this issue with me. Since it has not received a lot of attention I want to ask:

  • Is there anything unclear about the intent of this issue?
  • What if anything would make it more appealing to others to collaborate on?

Thank you.