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

电玩女神 2022-01-06 08:27 529阅读 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 条评论，529人围观）

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

相关阅读

相关 position fixed 在ios上滚动不固定问题

今天项目上用position: fixed时，谷歌浏览器没有问题，但是到ios上就出现了滚动时position: fixed跟动着滚动的问题。怎么解决呢在position:

刺骨的言语ヽ痛彻心扉/ 2023年02月26日 07:26/ 0 赞/ 25 阅读

相关 100%解决ios上audio不能自动播放的问题

100%解决ios上audio不能自动播放的问题参考文章： [（1）100%解决ios上audio不能自动播放的问题][1_100_ios_audio] （2）http

刺骨的言语ヽ痛彻心扉/ 2023年02月20日 13:43/ 0 赞/ 31 阅读

相关 iPhone Safari下iframe不显示滚动条无法滚动的解决方法

iPhone Safari下iframe不显示滚动条无法滚动的解决方法参考文章： [（1）iPhone Safari下iframe不显示滚动条无法滚动的解决方法][1_i

朴灿烈づ我的快乐病毒、/ 2023年02月16日 06:56/ 0 赞/ 31 阅读

相关 swiper 在turn.js不能滚动

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

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

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

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

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

相关 ios上iFrame滚动条失效

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

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

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

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

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

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

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

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

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

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

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

相关 IOS Safari 支持可滚动 iframe

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

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