在 IOS 上使用 iframe 的时候,发现超出的内容无法滚动了,在安卓上没有发现这样的问题。使用 -webkit-overflow-scrolling
属性可以解决这个问题。
HTML 代码:
<!-- 新闻预览 -->
<section class="view-news" id="view-news">
<div class="loading" id="loading"></div>
<div class="news-box">
<div class="close"></div>
<div class="content">
<iframe id="news_iframe" name="news_iframe"></iframe>
</div>
</div>
</section>
要让 iframe 内容超出后能够在 IOS 下继续滚动,需要在最外层的 section
标签应用如下样式:
/* 新闻预览 */
section.view-news{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 99999;
display: none;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
/** 新增 -webkit-overflow-scrolling 属性设置 **/
-webkit-overflow-scrolling: touch;
}
完。