Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable pull-to-refresh in iOS 15 Safari

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.

like image 946
VH-NZZ Avatar asked Sep 20 '21 21:09

VH-NZZ


People also ask

How do I stop Safari from pulling to refresh?

I disabled this behaviour by setting the CSS property touch-action of the target element to none.


2 Answers

I disabled this behaviour by setting the CSS property touch-action of the target element to none.

touch-action:none;

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

like image 79
Elias Dörig Avatar answered Oct 08 '22 15:10

Elias Dörig


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;
}
like image 36
Tina Cho Avatar answered Oct 08 '22 13:10

Tina Cho