在 iOS 15 Safari 中禁用下拉刷新

Question

iOS 15 已经发布，新版本的 Safari 也发布了无处不在的下拉刷新功能。不管喜欢与否，单页应用不太喜欢这样。

以下是在 Chrome 上为 iPhone 禁用它的方法：

Disable Chrome's pull-to-refresh on iPhone

知道如何在 iOS 15 的 Safari 中执行相同的操作吗？

CSSoverscroll-behavior-y: contain没有效果。

Answer 1

2013 年名为 iNoBounce 的库 (https://github.com/lazd/iNoBounce) 实际上在 iOS 15.

上仍然做得很好

直接复制文档中的示例确实禁用了下拉刷新。

Answer 2

iNoBounce 一直有效，直到您使用一根以上的手指使用手势。比方说你用两根手指下拉网页（例如），然后你会得到刷新。

目前，唯一对我有用的方法（但它会禁用缩放、滚动和其他触摸功能）是使用 event.preventDefault() 监听“touchmove”并将 passive 设置为 false。

Answer 3

适用于我们的用例的非常粗略的解决方案是为正文元素设置一个 overflow: hidden;，但是您需要为所有内容设置一个溢出容器元素，否则滚动会被阻塞。

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

body {
    overflow: hidden;
}

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

Answer 4

我通过将目标元素的 CSS 属性触摸操作设置为 none 来禁用此行为。

touch-action:none;

Disable pull-to-refresh in iOS 15 Safari