在iOS 15 Safari中禁用拉入刷新

1zmg4dgp 于 2022-12-15 发布在 iOS

关注(0)|答案(6)|浏览(582)

iOS15已经过时了，新发布的Safari也过时了，它带来了无处不在的拉刷新功能。不管你喜不喜欢，单页面应用都不太喜欢这样。
以下是如何在Chrome for iPhone上禁用它：
Disable Chrome's pull-to-refresh on iPhone
你知道如何在iOS15的Safari中做同样的事情吗？
CSS overscroll-behavior-y: contain不起作用。

ios

来源：https://stackoverflow.com/questions/69261011/disable-pull-to-refresh-in-ios-15-safari

6条答案

按热度按时间

4jb9z9bj1#

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

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

body {
    overflow: hidden;
}

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

赞(0）回复(0）举报 2022-12-15

col17t5w2#

我通过将目标元素的CSS属性touch-action设置为none来禁用此行为。
touch-action:none;
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

赞(0）回复(0）举报 2022-12-15

uidvcgyl3#

在2022年，这对我来说很有效：

html {
  overflow: hidden;
}

赞(0）回复(0）举报 2022-12-15

jhdbpxl94#

iNoBounce在你用多个手指做手势之前都能正常工作。比如说你用两个手指拉下网页（例如），然后你就会得到刷新。
到目前为止，唯一对我有效的方法（但它禁用了缩放、滚动和其他触摸功能）是使用event.preventDefault（）监听“touchmove”，并将passive设置为false。

赞(0）回复(0）举报 2022-12-15

bcs8qyzn5#

下面是棘手的部分：

/* 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;
}

B.T.W.如果您想禁用双指缩放，请使用以下命令：

/* 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" />

赞(0）回复(0）举报 2022-12-15

ha5z0ras6#

这个2013年名为iNoBounce（https://github.com/lazd/iNoBounce）的库实际上在iOS 15上仍然做得很好。
直接复制文档中的示例确实禁用了拉入刷新。

赞(0）回复(0）举报 2022-12-15

我来回答

在iOS 15 Safari中禁用拉入刷新

6条答案

相关问题

热门标签

最新问答