How to disable pull to refresh in Android chrome

I’ve been working on a PWA using F7 with pure JS and CSS with excellent results. F7 is fantastic, so first things first - thanx to Vladimir and your contributors!

My app “installs” as a home page web app and works great on both iOS and Android devices. But on Android the default “pull to refresh” feature kicks in whenever one over scrolls up and causes the app to reload and lose its state. I’ve tried using body { overscroll-behavior: none; } in my app.css file, but it has no effect. This seems like a common requirement. Has anyone found a solution for this?

1 Like

Use this CSS:

html {
    overscroll-behavior-y: contain;
}

Read more about overscroll behavior here: https://developers.google.com/web/updates/2017/11/overscroll-behavior

2 Likes

Thanx for your help. It works! I had actually used that article as my guide and thought I had tried every combination of applying the property to body or html element, setting contain or none, and including or excluding the -y suffix. But I guess I either missed that one - or the browser did :slight_smile: It’s definitely time to move from the flakey, deprecated application cache to service workers!

Thanx again!