同这篇文章一样,用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div,然后设置-webkit-overflow-scrolling属性。
例如:
1 2 3 |
<div class="content-iframe-wrapper"> <iframe frameborder="0" class="content-iframe" src=""></iframe> </div> |
1 2 3 4 5 6 7 8 9 10 11 |
.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 参考文档中有所提及。