移动端开发

[记录]让 IOS 支持 iframe 滚动

2017-09-21  本文已影响0人  柏丘君

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

完。

上一篇下一篇

猜你喜欢

热点阅读