禁用iOS 15 Safari中的下拉刷新功能

Question

禁用iOS 15 Safari中的下拉刷新功能

iossafarimobile-safaripull-to-refreshios15

23

iOS 15已经发布，带来了普遍使用的下拉刷新功能的新版Safari。无论你喜欢与否，单页应用程序不太喜欢这个功能。 以下是在iPhone上禁用Chrome中此功能的方法： 禁用iPhone上Chrome的下拉刷新 有没有办法在iOS 15的Safari中实现相同的功能？ CSS overscroll-behavior-y: contain 不起作用。

- VH-NZZ

4

看起来苹果又坑了我们.. 防止文档或页面滚动似乎不再可能，参见 https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/，请注意，body scroll lock演示在iOS 15上不再起作用：https://bodyscrolllock-modal.vercel.app。 - phil_lgr

2

你找到解决方案了吗？这会使我们的移动Web应用变得更糟。 - Alex Fox

2

虽然这不是一个正式的答案，但在 iOS 16 中使用“overscroll-behavior: none”能够解决这个问题。这并不是一个好的解决方案，因为它会完全禁止滚动过多，使得在iOS上的滚动非常不自然。但如果你非常需要一个解决办法，那似乎就只有这样了。我不确定他们怎么想到要添加overscroll-behavior，却忘记了添加一个“overscroll but don't refresh”的值，这是几乎总是需要的。 - Glenn Maynard

6个回答

11

2022年，这对我来说很顺利：

body {
  overflow: hidden;
}

- CaptainStiggz

8

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

touch-action:none;

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

- Elias Dörig

2

我在body中添加了touch-action:none，然后解决了这个问题。 - Himavan

5

阻止滚动...完全地... - Richardson

这对我没用。 - Julien Reszka

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;
  min-height: 100%; /* prevent pinch-zoom at page bottom */
}

这个：

// prevent pinch-zoom for iOS Safari 9~12
if (window.GestureEvent && !('touchAction' in document.documentElement.style)) {
  document.documentElement.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" />

- fuweichin

太棒了！我已经实施了，对我很有效。感谢你花时间写下这个。 - undefined

0

iNoBounce在使用一个手指的手势时有效。假设您用两个手指向下拉动网页（例如），那么您将获得刷新。

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

- Fernando Gutiérrez

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

对我来说没有立即发生。我试图使用两根手指，但它的行为正如我所需要的。 - VH-NZZ

-1

这个名为iNoBounce（https://github.com/lazd/iNoBounce）的2013库在iOS 15上仍然非常有效。

按照文档中的示例进行简单的复制即可禁用下拉刷新。

- VH-NZZ

inobounce 对我不起作用（iPadOS 15.0.1），我尝试使用 basic.html，当我 touchmove div 时，可以刷新页面。但是，当我向下滚动 div 中的 lorem ipsum，然后再向上滚动时，就无法触发刷新。当我点击 div 外部时，我可以通过 touchmove 在 div 上刷新页面。 - Alexander

我也一样，在 iPadOS 15.0.1 上遇到了同样的问题。 - alexcodes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tina Cho · Accepted Answer

我们使用的非常简单的解决方案是为元素设置overflow: hidden;，但是这样你需要有一个溢出容器元素来承载所有内容，否则滚动会被阻止。

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

body {
    overflow: hidden;
}

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