Web: Disable Pull-to-refresh

Targets Web
1

Is there a way to disable the “pull to refresh” feature in most major browsers? I find that on my iPhone or iPad, in a Xojo web app, if I aggressively scroll down on the screen, the Safari browser refreshes the entire page, which restarts my web app from scratch…

2

Found this. Stack overflow… use at your own risk… yada yada…

https://stackoverflow.com/a/74691376

3

Go to https://demos.xojo.com and test.
Is that behavior enough?

1 Like
4

What you might want to do is a way to save your session’s state. Like, the current page the user is on. And maybe even what TabPanel is selected. That kind of stuf.

When the page reloads, you could try to present the page the way it was when a user reloads the page.

5

Just make sure the “Are you sure you want to leave this page” message comes at a time when it is necessary.

It happens too often that I am just visiting some website, when this message pops up. That’s terrible UX. It should only appear when the user is editing stuff.

As I said before, you could save the state of the session. That state can be stored until it does no longer sense that the user accidentally refreshed the page. It could be stored in a cookie that expires after like 30 minutes.

6

This should work on all modern browsers

html, body {
    overscroll-behavior: none;
}
2 Likes
7

thanks @Greg_O that works:

adding this to the App.HTMLHeader solves the issue:

<style>
/* this will block the pull-to-refresh behavior */
html, body {
    overscroll-behavior: none;
}
</style>