如何在 iOS 13 Safari 中禁用身体滚动（当保存为 PWA 到主屏幕时）？

Question

问题：

我知道这个问题已经被问过十几次了，但这些问题的解决方案都不适合我。

我希望 iOS 13 Safari 上的 body 元素不滚动。这意味着没有滚动，也没有弹性反弹（溢出滚动）效果。

我设置了两个彼此相邻的元素overflow: scroll;，它们应该滚动，只是它们周围的主体不应该滚动。

我尝试过的所有解决方案都不适用于头部带有以下标签并保存到主屏幕的渐进式网络应用程序。

<meta name="apple-mobile-web-app-capable" content="yes">

---

我尝试过的解决方案：

尝试 1：设置隐藏在正文和/或 html 上的溢出。不适用于 iOS 13 Safari。

/sf/answers/1262625801/

html {  
    position: relative;
    overflow: hidden;
    height: 100%;
}

body {
    position: relative;
    overflow: hidden;
    height: 100%;
}

在 iOS 13 safari 中什么都不做，但在 macOS safari 和 Firefox 中有效。

尝试2：固定在身体上的设置位置。对我不起作用，因为当用户滚动时，主体不会，但滚动仍然阻止我的两个内部元素在溢出反弹动画时滚动。

/sf/answers/3351221961/

body {
    position: fixed;
}

只将正文放在页面滚动上。滚动（溢出滚动）通过固定体发生......

尝试 3：防止默认触摸移动。没有用（是一个较旧的解决方案......）。

/sf/answers/3489737471/

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, { passive: false });

我什么都不做。不是在 safari 中，也不是在 Firefox 中。

尝试 4：防止默认滚动窗口并将滚动位置设置回 0。由于有错误的动画，因此不可行。

window.addEventListener("scroll", (e) => {
    e.preventDefault();
    window.scrollTo(0, 0);
});

将滚动位置设置回 0，但溢出滚动仍然适用，最终导致错误行为。

---

一个演示它的片段：

要自己测试，请将下面的代码段另存为 html 文件，然后将其保存到 iPad（或 iPad 模拟器）的主屏幕上。当保存到主屏幕时，身体突然变得可滚动。

<meta name="apple-mobile-web-app-capable" content="yes">

---

他们都没有以我可以接受的方式工作，现在我该怎么做才能使其在 iOS 13 Safari 中正常工作（当作为 PWA 保存到主屏幕时）？

Answer 1

我将问题中的尝试 2 和尝试 4 结合起来。固定主体不显示溢出滚动，滚动重置可防止后台溢出滚动的长动画。它确实很难看，但还算有效。

body {
  position: fixed;
}

window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});

Answer 2

只需在 CSS 的 body 中添加一个 touch-action:none 即可：

body{

touch-action:none;

}

Answer 3

function unlockScroll () {
    const scrollY = this.body.style.top;
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.right = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
};

function lockScroll () {
    document.body.style.position = 'fixed';
    document.body.style.top = `-${window.scrollY}px`;
    document.body.style.left = '0';
    document.body.style.right = '0';
};