iframe在ios上不能滚动问题解决

Posted 2021-02-13 东风杨柳岸，岁月如烟

同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

<div class="content-iframe-wrapper">
    <iframe frameborder="0" class="content-iframe" src=""></iframe>
</div>

.content-iframe-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    width: 100%;
    height: calc(100vh - 60px);
}

.content-iframe-wrapper .content-iframe {
    width: 100%;
    height: 100%;
} 

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

该特性是非标准的，尚未有相关规范。另在Apple提供的Safari CSS 参考文档中有所提及。