在 iOS 15 Safari 中禁用下拉刷新答案

【问题标题】：Disable pull-to-refresh in iOS 15 Safari在 iOS 15 Safari 中禁用下拉刷新
【发布时间】：2021-11-14 13:12:44
【问题描述】：

iOS 15 已经发布，Safari 的新版本也发布了，它带来了无处不在的下拉刷新。不管你喜不喜欢，单页应用都不太喜欢。

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

知道如何在 iOS 15 的 Safari 中做同样的事情吗？

CSS overscroll-behavior-y: contain 无效。

【问题讨论】：

看起来苹果又把我们搞砸了。阻止文档或正文滚动似乎不再可能，请参阅pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari，请注意正文滚动锁定演示在 iOS 15 上不再起作用： bodyscrolllock-modal.vercel.app
您找到解决方案了吗？这让我们的移动网络应用程序现在变得更糟了。

【解决方案1】：

我通过将目标元素的 CSS 属性 touch-action 设置为 none 来禁用此行为。

touch-action:none;

【讨论】：

【解决方案2】：

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

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

body {
    overflow: hidden;
}

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

【讨论】：

这很好用，谢谢！就我而言，我已经将#container 的高度设置为其他值，所以 height:100vh;不需要。
这实际上对我有用，并且没有一堆 hacky JS 事件处理程序会在应用程序中引起很多副作用。这里没有副作用！
当 iOS 15 Safari 处于“选项卡栏”模式（设置 > Safari > 选项卡）时，这适用于我的网站，但是当它处于“单选项卡”模式时，会返回拉动刷新行为。有其他人看到相同的行为吗？

【解决方案3】：

iNoBounce 一直有效，直到您使用超过一根手指的手势。假设您用两根手指（例如）下拉网页，然后您将获得刷新。

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我并没有立即发生。我正在尝试使用两根手指，但它的行为符合我的需要。

【解决方案4】：

名为 iNoBounce (https://github.com/lazd/iNoBounce) 的 2013 年库实际上在 iOS 15 上仍然可以很好地发挥作用。

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

【讨论】：

inobounce 对我不起作用（iPadOS 15.0.1），我尝试使用 basic.html，当我触摸移动 div 时，我可以刷新页面。但是，当我向下滚动 div 内的 lorem ipsum 然后向上滚动时，我无法触发刷新。当我在 div 外部点击时，我可以在 div 上使用 touchmove 刷新页面。
对我来说也一样，在 iPadOs 15.0.1 上也是如此