iOS 13のサファリで本体のスクロールを無効にする方法（ホーム画面にPWAとして保存した場合）？

問題：

私はこの質問が何十回も尋ねられたことを知っていますが、それらの質問に対する解決策のどれも私にとってうまくいきませんでした。

IOS 13 Safariのbody要素がスクロールしないようにしたい。これは、スクロールやエラスティックバウンス（オーバーフロースクロール）効果がないことを意味します。

私はoverflow: scroll;を設定した隣り合った2つの要素を持っています。それらはスクロールする必要がありますが、それらの周りの本体だけではスクロールできません。

頭の中に次のタグがあり、ホーム画面に保存されているプログレッシブWebアプリでは、私が使用していないすべてのソリューション。

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

私が試したソリューション：

試行1：オーバーフローを本文またはHTMLに非表示に設定します。 iOS 13のサファリでは機能しませんでした。

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

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

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

iOS 13サファリでは何もしませんが、macOSサファリとFirefoxでは機能します。

試行2：本体の位置を固定します。ユーザーがスクロールしても本体は機能しないため、オーバーフローバウンスがアニメーション化されている間、スクロールによって2つの内部要素がスクロールされないため、私には機能しません。

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

body {
    position: fixed;
}

ページのスクロールの上に本文を置くだけです。スクロール（オーバーフロースクロール）は、固定されたボディを介して行われます...

3：を試して、タッチ時のデフォルトの移動を防ぎます。動作しませんでした（古いソリューションです...）。

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

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

私が言うことができるように何もしません。サファリにも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として保存した場合）で正しく機能するようにするには、どうすればよいですか？

javascripthtmlioscsssafari

2019/12/05swift lynx

私の場合（アプリは要素を配置するためにドラッグする必要があります） touch-action をnoneに設定すると、特定の要素をドラッグするときにスクロールが回避されました。

例えば.

draggableElement.css('touch-action', 'none') // disable actions
draggableElement.css('touch-action', 'auto') // restore actions

2020/01/22Georgi Yankov

window.addEventListener('touchend', _ => {
    window.scrollTo(0,0)
});

これにより、ユーザーが体を離した後、体を0,0にスナップして戻すことができます。これにより、ユーザーは、すぐに戻る以外に、奇妙なアニメーションなしですぐに下にスクロールできます。スムーズスクロールアニメーションで試してみましたが、常に十分な速度でアニメーション化するとは限りません。これにより、そのiPhoneのバウンスエラスティックスクロールからボディがスクロールするときに発生する画面ロックが防止され、ユーザーがプルを放したときにのみトリガーされます。

2020/06/17StarPlayrX