web-dev-qa-db-ja.com

JavascriptタッチイベントがモバイルSafariで機能しない

ユーザーがiframeに触れた場合にスクロールするように制限しようとしています。ですから、体に触れるとスクロールできます。

以下のコードがモバイルChromeで正常に機能するのに、モバイルSafariでは機能しないのはなぜか疑問に思います。サファリのためにこれを修正する方法はありますか？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
        <style>
            .overflowHidden {
                position:relative;
                overflow-y:hidden;
            }
            .overflowAuto {
                -webkit-overflow-scrolling: touch;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <section>
            <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
            <iframe id="appSimulator" style="background: #000000;" width="189px" height="400px" frameborder="0" scrolling="no"></iframe>
            <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        </section>
        <script type="text/javascript">
            document.body.addEventListener('touchstart', function(){
                document.body.style.overflow="auto";
                $('body').removeClass('overflowHidden');
                $('body').addClass('overflowAuto');
            }, false)
            document.body.addEventListener('touchend', function(){
                document.body.style.overflow="hidden";
                $('body').removeClass('overflowAuto');
                $('body').addClass('overflowHidden');
            }, false)
        </script>
    </body>
</html>

編集

モバイルの例Chrome-これはSafariモバイルに必要なものです

enter image description here

ありがとう。

編集2

Muecasからの助けをありがとう。

これがSafariMobileの現在の結果です

enter image description here

現在のコード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                -webkit-overflow-scrolling: touch;
            }
            .iframeContainer, iframe {
                width: 189px;
                height: 405px;
            }
            .iframeContainer {
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <section>
            <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
            <div class="iframeContainer">
                <iframe id="appSimulator" src="https://appetize.io/embed/keyyyyyyy?device=iphone5s&scale=50&autoplay=false&orientation=portrait&deviceColor=black&language=zh-Hant" frameborder="0" scrolling="no"></iframe>
            </div>
            <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        </section>
    </body>
</html>

.iframeContainer { overflow: hidden; }を設定した場合

enter image description here

javascriptiframeoverflowaddeventlistener
11
Pak Ho Cheung

Safari iOSの主な問題は、iframeタグが何らかのレスポンシブ要素として扱われ、そのサイズと含まれる要素（ロードされたHTML）のサイズに対して奇妙に動作することです。実際のコンテンツでiframeを使用してテストしたので、完全にスクロール可能になります。例と同じコードを使用して、Safari iOSは、iframeとwidthが定義された、含まれているhtmlコンテンツイベントの全高でheightを表示しました。

この問題を解決するには、iframeをblockコンテナに含めてから、ブロックコンテナサイズ（widthとheight）とoverflowをautoに設定し、ベンダー属性を本文に追加してiframeを適切にスクロールできるようにする必要があります。また、iframeをスクロール可能に設定することを忘れないでください。

js実装を破棄できます。

私はこれをすべてのデスクトップブラウザ、SafariiOSおよびモバイルChromeでテストしました。

Iframe内のレスポンシブコンテンツについて話し合うときに、 このリンク を確認することもできます。

それが役に立てば幸い。

メインhtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            -webkit-overflow-scrolling: touch;
        }
        .iframeContainer, iframe {
            width: 200px;
            height: 200px;
        }
        .iframeContainer {
            overflow: auto;
        }
    </style>
</head>
<body>
    <section>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <div class="iframeContainer">
            <iframe id="appSimulator" frameborder="0" src="scrolling.html" scrolling="yes"></iframe>
        </div>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
    </section>
</body>
</html>

ロードされたiframe：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</body>
</html>
7
muecas

タッチイベントはうまく機能しているようですが、オーバーフローは機能していません。
HTMLがどのように表示されるかわかりませんが、次の方法を試すことができます。

  1. 非表示：
    body { /* position can be fixed */ position:relative; overflow-y:hidden; }

  2. 自動：
    body { -webkit-overflow-scrolling: touch; overflow: auto; }

2
Wicky