在 iOS 15 Safari 中禁用下拉刷新

Question

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

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

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

CSS overscroll-behavior-y: contain无效。

Answer 1

在 2022 年，这对我来说很管用：

html {
  overflow: hidden;
}

Answer 2

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

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

Answer 3

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

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

body {
    overflow: hidden;
}

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

Answer 4

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

touch-action:none;

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

Answer 5

这是棘手的部分：

/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}

/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}

顺便说一句，如果你想禁用双指缩放，那么使用这个：

/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
  touch-action: pan-x pan-y;
}

这个：

// prevent pinch-zoom for iOS Safari 9~12
if (window.GestureEvent && !('touchAction' in document.body.style)) {
  document.body.addEventListener('gesturestart', (e)=>{e.preventDefault()}, {passive: false, capture:true});
}

还有这个：

<!-- prevent pinch-zoom for Chrome / old Safari -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Answer 6

2013 年名为 iNoBounce ( https://github.com/lazd/iNoBounce ) 的库实际上在 iOS 15 上仍然做得很好。

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

在 iOS 15 Safari 中禁用下拉刷新

问题描述

6 个解决方案

解决方案1
3 2022-10-04 00:10:33

解决方案2
0 2021-09-22 14:54:02

解决方案3
0 2021-10-15 19:48:00

解决方案4
0 2022-01-04 13:39:15

解决方案5
0 2022-12-05 16:28:27

解决方案6
-1 2021-09-22 08:16:29

在 iOS 15 Safari 中禁用下拉刷新

问题描述

6 个解决方案

解决方案1 3 2022-10-04 00:10:33

解决方案2 0 2021-09-22 14:54:02

解决方案3 0 2021-10-15 19:48:00

解决方案4 0 2022-01-04 13:39:15

解决方案5 0 2022-12-05 16:28:27

解决方案6 -1 2021-09-22 08:16:29

解决方案1
3 2022-10-04 00:10:33

解决方案2
0 2021-09-22 14:54:02

解决方案3
0 2021-10-15 19:48:00

解决方案4
0 2022-01-04 13:39:15

解决方案5
0 2022-12-05 16:28:27

解决方案6
-1 2021-09-22 08:16:29