如何在iOS 13野生动物园中禁用身体上的滚动（当另存为PWA到主屏幕时？）>

问题描述 投票：1回答：1

问题：

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

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

我在overflow: scroll;上设置了两个彼此相邻的元素，这些元素应该滚动，但周围的物体不应该滚动。

我刚刚使用过的所有解决方案都不适用于渐进式Web应用程序，这些应用程序的头部带有以下标记并保存到主屏幕。

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

我尝试过的解决方案：

try 1：设置溢出隐藏在正文和/或html中。不适用于iOS 13野生动物园。

https://stackoverflow.com/a/18037511/10551293

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

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

[在iOS 13野生动物园中不执行任何操作，但在macOS野生动物园和Firefox中有效。

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

https://stackoverflow.com/a/47874599/10551293

body {
    position: fixed;
}

仅将正文置于页面的滚动上方。滚动（溢出滚动）发生在固定物体上...

try 3：

防止移动默认触摸。无效（是较旧的解决方案...）。

https://stackoverflow.com/a/49853392/10551293

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

我无能为力。 Safari和Firefox中都没有。

尝试4：

防止在窗口滚动时使用默认值，并将滚动位置设置回0。由于动画错误，无法使用。
window.onscroll = function(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野生动物园中正常工作（当保存为PWA到主屏幕时？）>

[问题：我知道这个问题已经被问过十遍了，但是这些问题的解决方案都不适合我。我希望iOS 13野生动物园中的body元素不滚动。这意味着没有...

您可以添加CSS以防止完全滚动：

overflow: hidden;
position: fixed;
javascript html ios css safari
1个回答
0
投票

您可以添加CSS以防止完全滚动：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.