VH-*_*NZZ 25 safari mobile-safari ios pull-to-refresh ios15
iOS 15 已经发布，新版 Safari 也随之发布，带来了无处不在的下拉刷新功能。不管你喜欢与否，单页应用程序不太喜欢这样。
以下是在 iPhone 版 Chrome 上禁用它的方法：
知道如何在 iOS 15 的 Safari 中执行相同操作吗？
CSSoverscroll-behavior-y: contain没有任何效果。
小智 17
适用于我们的用例的非常粗略的解决方案是将 an 设置overflow: hidden;为 body 元素，但是您需要为所有内容提供一个溢出的容器元素，否则滚动将被阻止。
<body>
<div id="container"> Content </div>
</body>
body {
overflow: hidden;
}
#container {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
我通过将目标元素的 CSS 属性 touch-action 设置为 none 来禁用此行为。
touch-action:none;
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
这是棘手的部分：
/* 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;
}
顺便说一句，要禁用捏合缩放，请使用 CSS
/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
touch-action: pan-x pan-y;
min-height: 100%; /* prevent pinch-zoom at page bottom */
}
和JS
// 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});
}
和 HTML
<!-- prevent pinch-zoom for Chrome / old Safari -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
要禁用 iOS/iPadOS Safari 的双击缩放：
if (window.GestureEvent) {
window.addEventListener('click', (e) => {e.preventDefault()});
}
VH-*_*NZZ -1
2013 年的库 iNoBounce ( https://github.com/lazd/iNoBounce ) 实际上在 iOS 15 上仍然表现得很好。
直接复制文档中的示例确实禁用了拉动刷新。
| 归档时间： |
|
| 查看次数： |
31579 次 |
| 最近记录： |