美文网首页移动端开发
[记录]让 IOS 支持 iframe 滚动

[记录]让 IOS 支持 iframe 滚动

作者: 柏丘君 | 来源:发表于2017-09-21 09:59 被阅读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;  
    }
    
    

    完。

    相关文章

      网友评论

        本文标题:[记录]让 IOS 支持 iframe 滚动

        本文链接:https://www.haomeiwen.com/subject/lzczsxtx.html