iframe在ios上不能滚动问题解决

电玩女神 2022-01-06 08:27 455阅读 0赞

同[这篇文章][Link 1]一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

<div class="content-iframe-wrapper">
        <iframe frameborder="0" class="content-iframe" src=""></iframe>
    </div>

.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][https_developer.mozilla.org_zh-CN_docs_Web_CSS_-webkit-overflow-scrolling]

该特性是非标准的，尚未有相关规范。另在Apple提供的[Safari CSS 参考文档][Safari CSS]中有所提及。

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/10551072.html

[Link 1]: https://www.cnblogs.com/Man-Dream-Necessary/p/10270622.html
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_-webkit-overflow-scrolling]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
[Safari CSS]: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关 swiper 在turn.js不能滚动

这个问题，使用turn.js的同学一定遇到过，那怎么解决呢？答案：翻到对应包含swiper 的那页，重新初始化swiper ![在这里插入图片描述][watermark

我会带着你远行/ 2023年02月10日 08:20/ 0 赞/ 111 阅读

相关点击菜单通过iframe的src改变来显示不同的页面。iframe能高度自适应，iframe滚动但是不显示滚动条

当我们不使用任何的框架来写官网，把几个不同的页面怎么能在菜单改变的时候放在一起呢？顶部菜单和底部的一般是不变的。变得是中间的内容，那么我们考虑一个总的页面，含有不变的元素，

比眉伴天荒/ 2023年01月09日 14:16/ 0 赞/ 85 阅读

相关 ios上iFrame滚动条失效

在做公户号的时候，有一个页面引入了IFrame。然后出现了一个很尴尬的问题，iframe不出现滚动条，而且在屏幕高度以外的内容都被截掉了。百度之后，找到了解决方案，亲测可行

短命女/ 2022年05月27日 09:50/ 0 赞/ 155 阅读

相关解决在VirtualBox上安装CentOs系统不能上网问题

> 一，问题今天在自己的虚拟机上按照centos，发现自己在安装系统的时候，少做了一步网络配置。后来真的就上不了网了。 > 二，解决方案 2.1 进入VirtualBo

心已赠人/ 2022年04月05日 11:55/ 0 赞/ 462 阅读

相关 iOS页面不滚动

可以参考:[https://www.cnblogs.com/xiahj/p/8036419.html][https_www.cnblogs.com_xiahj_p_803641

悠悠/ 2022年02月19日 13:50/ 0 赞/ 224 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 423 阅读

相关 iframe在ios上不能滚动问题解决

同[这篇文章][Link 1]一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-w

电玩女神/ 2022年01月06日 08:27/ 0 赞/ 456 阅读

相关 iframe 上下滚动条如何默认在下方

问题：iframe 上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，有办法让它出现在下方吗?

àì夳堔傛蜴生んèń/ 2021年09月29日 18:22/ 0 赞/ 274 阅读

相关 IOS Safari 支持可滚动 iframe

Safari 支持可滚动 iframe的方法：在父容器添加 CSS3 属性 "-webkit-overflow-scrolling:touch"

梦里梦外;/ 2021年09月22日 10:28/ 0 赞/ 319 阅读

相关解决 - 解决ios input 和textarea不能输入的问题

写移动端项目总有一些兼容性需要我们解决滴，就比如我现在遇到的问题：ios 无法正常在input和textarea上面输入我们需要的内容，而安卓手机是可以正常输入的，一点问题

谁践踏了优雅/ 2021年09月09日 02:30/ 0 赞/ 745 阅读