问题：
我希望 iOS 13 Safari 上的 body 元素不滚动。这意味着没有滚动，也没有弹性反弹（溢出滚动）效果。
我设置了两个相邻的元素overflow: scroll;，那些应该滚动，只是它们周围的身体不应该滚动。
我尝试过的所有解决方案都不适用于渐进式网络应用程序，这些应用程序的头中有以下标签并保存到主屏幕。
<meta name="apple-mobile-web-app-capable" content="yes">
我尝试过的解决方案：
-
设置隐藏在正文和/或 HTML 上的溢出。不适用于 iOS 13 safari：https://stackoverflow.com/a/18037511 https://stackoverflow.com/a/18037511
html {
position: relative;
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
height: 100%;
}
在 iOS 13 Safari 中不执行任何操作，但在 macOS Safari 和 Firefox 中有效。
-
设置位置固定在本体上。对我不起作用，因为当用户滚动时，主体不会滚动，但滚动仍然会阻止我的两个内部元素在溢出反弹动画时滚动：https://stackoverflow.com/a/47874599 https://stackoverflow.com/a/47874599
body {
position: fixed;
}
只将主体放在页面的滚动之上。滚动（溢出滚动）通过固定主体发生。
-
防止默认的触摸移动。不起作用（是一个较旧的解决方案......）：https://stackoverflow.com/a/49853392 https://stackoverflow.com/a/49853392
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
据我所知，什么也没做。 Safari 和 Firefox 中都没有。
-
防止默认滚动窗口并将滚动位置设置回 0。由于动画有问题，不可行。
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
将滚动位置设置回 0，但溢出滚动仍然适用，这最终会导致错误行为。
演示它的片段：
要自行测试，请将下面的代码片段另存为 HTML 文件，并将其保存到 iPad（或 iPad 模拟器）的主屏幕上。当保存到主屏幕时，正文突然变得可滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<style>
body, html {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
nav, footer {
width: 100%;
height: 5rem;
background: blue;
flex-shrink: 0;
}
main {
display: flex;
height: 0;
flex-grow: 1;
padding: 2rem;
}
section {
width: 50%;
overflow: scroll;
display: flex;
flex-direction: column;
align-items: center;
}
div {
flex-shrink: 0;
width: 25%;
height: 18rem;
margin: 1rem;
background: red;
}
</style>
<nav></nav>
<main>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
<footer></footer>
</body>
</html>
他们都没有以我可以接受的方式工作。我该如何执行此操作才能在 iOS 13 Mobile Safari 中正常工作（当保存为 PWA 到主屏幕时）？
我将问题中的尝试 2 和尝试 4 结合起来。固定主体不显示溢出滚动，滚动重置可防止后台溢出滚动的长动画。它确实很难看，但还算有效。
body {
position: fixed;
}
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
