个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 02:23:59 24 4
gpt4 key购买 nike

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

想知道为什么下面的代码在 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 移动版

enter image description here

谢谢。

编辑 2

感谢 muecas 的帮助。

这是 Safari Mobile 的当前结果

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

最佳答案

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

要解决此问题，您需要将 iframe 包含在 block 容器中，然后设置 block 容器大小(width 和 height) 和 overflow 为 auto，并在 body 中添加 vendor 属性以允许 iframe 正常滚动.另外，不要忘记将 iframe 设置为可滚动。

您可以放弃 js 实现。

我在每个桌面浏览器、Safari iOS 和移动版 Chrome 上测试了这个。

您可能还想查看 this link当讨论 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>

关于Javascript 触摸事件在 Mobile Safari 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50341688/

24 4 0
文章推荐： 使用 htmlUnit 的基于 Javascript 的动态内容
文章推荐： java - 将列表值顺序传递给单值消费者的最佳方式？
文章推荐： java - Cassandra:使用 DataStax Java 驱动程序选择一系列 TimeUUID
文章推荐： java - 获取打印到 JPanel 中的 TextArea 的方法
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com