Question

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

想知道为什么以下代码在移动Chrome中运行良好，但在Mobile 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; }

Answer 1

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

要解决此问题，您需要将iframe包含在block容器中，然后设置阻止容器大小（width和height）和{{1转到overflow，并将vendor属性添加到正文以允许auto正确滚动。另外，不要忘记将iframe设置为可滚动。

您可以放弃iframe实施。

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

您可能还想在讨论iframe内的响应内容时检查this link。

希望它有所帮助。

主要js：

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

Answer 2

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

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

Javascript触摸事件在Mobile Safari中无效

2 个答案: