Javascript 触摸事件在 Mobile Safari 中不起作用答案

【问题标题】：Javascript touch event not working in Mobile SafariJavascript 触摸事件在 Mobile Safari 中不起作用
【发布时间】：2018-10-24 18:50:17
【问题描述】：

我试图限制用户在触摸 iframe 时滚动。所以，如果他们接触到身体，他们就可以滚动。

想知道为什么下面的代码在 Mobile Chrome 中运行良好，但在 Mobile Safari 中无法运行。有什么办法可以为 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 移动版

谢谢。

编辑 2

感谢 muecas 的帮助。

这是来自 Safari Mobile 的当前结果

当前代码

<!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; }

【问题讨论】：

该代码，如果设法让它工作，将阻止页面上的所有滚动，无论您是否触摸 iframe。 iframe 上的touch 不会在主html 中触发touch。所以问题是，问题不在于溢出html 或挂钩到iframe 事件以防止滚动？还是两者兼而有之？
@muecase 当我尝试使用 Chrome 浏览器在移动设备中测试此代码时，如果我触摸 iFrame 并向上或向下滚动，则正文视图不会滚动。但是当我在移动设备上使用 Safari 执行此操作时，没有任何事情发生，就像只是向上或向下滚动而没有事件。我遇到的问题是我在 iFrame 中有一个滚动视图。这是我要嵌入的东西。 appetize.io 当我尝试滚动他们的模拟器时，只有身体会滚动。模拟器 (iFrame) 中的视图不起作用。
容器 html 必须是可滚动的？原因是您在 Chrome 中的示例，您也无法滚动主 html。
在 chrome mobile 中，我可以滚动。请看我的编辑
感谢您提供的图形示例。我会尽力帮助你。

标签： javascript iframe overflow addeventlistener

【解决方案1】：

Safari iOS 的主要问题是iframe 标签被视为某种响应元素，并且对其大小和包含的元素（加载的 HTML）大小会表现得很奇怪。我使用带有真实内容的iframe 进行了测试，因此它可以完全滚动。使用与您的示例相同的代码，Safari iOS 显示了 iframe，其中包含的 html 内容事件的完整高度定义了 width 和 height。

要解决这个问题，您需要将iframe 包含在block 容器中，然后将块容器大小（width 和height）和overflow 设置为auto，并添加正文的供应商属性以允许正确滚动iframe。另外，不要忘记将 iframe 设置为可滚动。

您可以放弃 js 实现。

我在每个桌面浏览器、Safari iOS 和移动 Chrome 上都对此进行了测试。

当讨论 iframe 内的响应式内容时，您可能还想查看this link。

希望对你有帮助。

主要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>

【讨论】：

嗨。感谢所有的帮助。我认为它真的很接近。我现在唯一的问题是，如果我向上或向下滚动，appSimulator 会反弹。
我认为反弹来自第三方src
@PakHoCheung 反弹？我可以看一个例子吗？
感谢您的帮助。我上传了我在 Safari 移动版中看到的 gif
@PakHoCheung 因此实现了请求的行为。您也可以滚动主页和 iframe。缺少什么？

【解决方案2】：

似乎触摸事件效果很好，但溢出不是。
我不确定你的 html 是什么样的，但是你可以试试这些：

隐藏：
body { /* position can be fixed */ position:relative; overflow-y:hidden; }
自动：
body { -webkit-overflow-scrolling: touch; overflow: auto; }

【讨论】：

如何在 Javascript 中编写 -webkit-overflow-scrolling？谢谢。
您可以将它们设置为类样式，例如.overflow-hidden{position:relative;overflow-y:hidden;}。那么你需要使用$('body').removeClass('overflow-auto')和$('body').addClass('overflow-hidden')。
还是不行。更新了在 Safari 移动版中产生此问题的整个 html 文件。
你的问题是 Overflow:hidden not working in safari browser 这是一个问题here。他的建议是在 html 标签中添加相同的类。希望对你有帮助。
该帖子也无法修复 MOBILE safari。无论如何，谢谢你的帮助