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

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

javascript iframe

Javascript触摸事件在Mobile Safari中不起作用,javascript,iframe,overflow,addeventlistener,Javascript,Iframe,Overflow,Addeventlistener,我试图限制用户在触摸iframe时滚动。所以，若他们触摸身体，他们可以滚动想知道为什么下面的代码在Mobile Chrome中运行良好，但在Mobile Safari中不起作用。有没有办法在safari上解决这个问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

我试图限制用户在触摸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>


.溢出隐藏{
位置：相对位置；
溢出y：隐藏；
}
.overflowAuto{
-webkit溢出滚动：触摸；
溢出：自动；
}
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
document.body.addEventListener（'touchstart'，function（）{
document.body.style.overflow=“自动”；
$（'body'）.removeClass（'overflowHidden'）；
$（'body'）.addClass（'overflowAuto'）；
}，错）
document.body.addEventListener（'touchend'，function（）{
document.body.style.overflow=“hidden”；
$（'body'）.removeClass（'overflowAuto'）；
$（'body'）.addClass（'overflowHidden'）；
}，错）

编辑

移动Chrome示例-这就是我在Safari Mobile中想要的

谢谢

编辑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>


身体{
-webkit溢出滚动：触摸；
}
.iframe容器，iframe{
宽度：189px；
高度：405px；
}
.iframeContainer{
溢出：自动；
}
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好

如果我设置

.iframeContainer{overflow:hidden；}

触摸事件似乎运行良好，但溢出效果不佳。
我不确定您的html是什么样子，但是您可以尝试以下方法：

隐藏：

正文{
/*位置可以固定*/
位置：相对位置；
溢出y：隐藏；
}

自动：

正文{
-webkit溢出滚动：触摸；
溢出：自动；
}

Safari iOS的主要问题是，

iframe

标记被视为某种响应元素，其大小和包含的元素（加载的HTML）大小会表现出奇怪的行为。我使用带有真实内容的

iframe

进行了测试，因此它可以完全滚动。使用与您示例中相同的代码，Safari iOS显示了

iframe

，其中包含html内容事件的全高，并定义了

width

和

height

要解决此问题，您需要将

iframe

包含在

块

容器中，然后将块容器大小（

width

和

height

）和

overflow

设置为

auto

，并将供应商属性添加到正文中，以允许正确滚动

iframe

。另外，不要忘记将iframe设置为可滚动

您可以放弃

js

实现

我在每一款桌面浏览器、Safari iOS和移动Chrome上都进行了测试

您可能还希望检查何时讨论iframe中的响应内容

希望能有帮助

Main

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>

如何在Javascript中编写webkit溢出滚动？谢谢。您可以将它们设置为类样式，如

.overflow hidden{position:relative；overflow-y:hidden；}

。然后您需要使用

$（'body'）.removeClass（'overflow-auto'）

和

$（'body'）.addClass（'overflow-hidden'）

。仍然不起作用。更新了导致Safari mobile出现此问题的整个html文件。您的问题是溢出：隐藏在Safari浏览器中不工作，这是一个问题。他建议将相同的类添加到html标记中。我希望它能对你有所帮助。那个帖子也不能修复移动safari。无论如何，感谢您的帮助，如果代码能够正常工作，将阻止页面上的所有滚动，无论您是否触摸iframetouch不会在主html中触发

touch

。所以问题是，问题不是溢出

html

或钩住iframe事件以防止滚动？或者两者都有？@muecase当我尝试在带有Chrome浏览器的mobile中测试此代码时，如果我触摸iFrame并向上或向下滚动，则body视图将不会滚动。但是，当我在使用Safari的移动设备中执行此操作时，不会发生任何事情，就像只向上或向下滚动而没有任何事件一样。我遇到的问题是iFrame中有一个滚动视图。这是我试图嵌入的东西。当我试图滚动他们的模拟器时，只有身体会滚动。模拟器中的视图（iFrame）不工作。容器html必须可滚动？因为这是你在Chrome中的例子，你也不能滚动主html。在Chrome mobile中，我可以滚动。请参阅我的编辑谢谢你提供了实现目标的图形示例。我会尽力帮你的。嗨。谢谢你的帮助。我认为这真的很接近。我现在唯一的问题是，如果我向上或向下滚动，

appSimulator

会反弹。我想反弹来自第三方

src

@pakhocheng bounce？我可以看一个例子吗？谢谢你的帮助。我上传了一张我在Safari中看到的gifmobile@PakHoCheung这样就实现了请求的行为。您也可以滚动主页面和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>