Question

我正在使用嵌入视频（vimeo＆amp; youtube）的页面上工作。我在移动设备上遇到问题：当我尝试向下滚动时，如果手指在iframe上，则页面不会滚动。您必须将手指放在iframe周围以允许页面滚动。

要解决这个问题的想法吗？

希望这很清楚，抱歉无法向您发送受密码保护的服务器上的页面...

提前谢谢，亚历

Answer 1

在Mobile Safari上，将iframe包装在容器div中。从容器中可以控制滚动。您还必须向iframe添加类或ID以控制其属性。设置溢出和webkit溢出。但是，移动Safari中的iframe是众所周知的错误，您可能需要多次点击它以使其工作。这是一个例子：

<style>
    #page_container {
        max-height: 100%;
        max-width: 100%;
        background: #ffd800;
        padding: 1em;
        position: relative;

    }

    #iframe_container {
        height: 800px;
        width: 70%;
        overflow: scroll;
        -webkit-overflow-scrolling:touch;
        position: absolute;
    }

    #iframe {
        height: 100%;
        width: 100%;
    }

</style>

<div id="page_container">
    <div id="iframe_container">
        <iframe id="iframe" src="www.google.com"></iframe>
    </div>
</div>

滚动问题iframe ios

1 个答案: