Disable pull-to-refresh in iOS 15 Safari

user_2882550 0
Viewed 14714

iOS 15 is out and so is the new release of Safari that brings the ubiquitous pull-to-refresh. Like it or not, single-page apps don't like that too much.

Here's how to disable it on Chrome for iPhone:

Disable Chrome's pull-to-refresh on iPhone

Any idea how to do the same in Safari in iOS 15?

The CSS overscroll-behavior-y: contain has no effect.

ios15 pull-to-refresh mobile-safari safari ios
4 Answers

Very crude solution that worked for our use case is to set an overflow: hidden; to the body element, but then you need to have an overflowing container element for all the content, otherwise scroll is blocked.

<body>
    <div id="container"> Content </div>
</body>

body {
    overflow: hidden;
}

#container {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
user_53968900
user_171744240

iNoBounce works until you use a gesture with more than one finger. Let's say you pull down the web page with two fingers (for example), then you will get the refresh.

For now, the only approach that have worked for me (but it disables zoom, scroll and other touch functions) is use event.preventDefault() listening to "touchmove" with passive set to false.

user_84738860

Ths 2013 library called iNoBounce (https://github.com/lazd/iNoBounce) actually still does the trick pretty well on iOS 15.

Straightforward replication of the example in the documentation did disable the pull to refresh.

user_28825500
Related