[记录]让 IOS 支持 iframe 滚动

在 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;  
}

完。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容