iframe在ios上不能滚动问题解决
同这篇文章一样,用到了-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
该特性是非标准的,尚未有相关规范。另在Apple提供的Safari CSS 参考文档中有所提及。
iframe在ios上不能滚动问题解决的更多相关文章
- 解决 iframe 在 ios 上不能滚动的问题
HTML代码在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...
- iOS 与 惯性滚动
注:以下所有例子均 只 在 iOS 的微信中测试过,但对于饿了么APP的内置浏览器同样适用(两者使用相同内核) 引题 工作中常常有需要显示大量信息的情况,列表超出一屏就涉及到滚动的问题.例如 - va ...
- 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...
- ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行
https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...
- 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题
解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...
- 细数iOS上的那些安全防护
细数iOS上的那些安全防护 龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...
- 微信双开是定时炸弹?关于非越狱iOS上微信分身高危插件ImgNaix的分析
作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...
- ios上position:fixed失效问题
手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...
- :active 为什么在ios上失效
:active是针对鼠标,而手机上是没有鼠标,而是touchstart,所以早成了ios上不兼容 解决方法是: window.onload = function(){ document.body.ad ...
随机推荐
- 自动化运维工具saltstack03 -- 之SaltStack的数据系统
SaltStack数据系统 saltstack有两种数据系统:grains与pillar 1.SaltStack数据系统之grains grains可以收集minion端的静态数据(即机器启动时收集一 ...
- vsftpd安装配置虚拟用户
原文发表于cu:2016-03-11 参考文档: FTP原理:http://vbird.dic.ksu.edu.tw/linux_server/0410vsftpd_1.php FTP配置:http: ...
- python基础知识-7-内存、深浅、文件操作
python其他知识目录 1.一些对内存深入理解的案例 以下列举列表,列表/字典/集合这些可变类型都是一样的原理 变量是个地址,指向存储数据的内存空间的地址,它的实质就相当于c语言里的指针.变量和数据 ...
- 基于NABCD评论作品,及改进建议
组名:杨老师粉丝群 组长:乔静玉 组员:吴奕瑶 刘佳瑞 公冶令鑫 杨磊 杨金铭 张宇 卢帝同 一.拉格朗日2018--<飞词> 1.1 NABCD分析 N(Need,需求) ...
- 团队目标WBS及具体任务分工
• 首先我们讨论了实验第一个冲刺周期要实现的功能,我们的初期目标. • 然后我们进一步梳理了第一阶段的任务和需求. • 之后对任务进行了划分和领取. • 最后每个人对自己的任务进行了估算,并约定 ...
- OpenCV学习笔记——腐蚀与膨胀
1.膨胀 此操作将图像 与任意形状的内核 (),通常为正方形或圆形,进行卷积. 内核 有一个可定义的 锚点, 通常定义为内核中心点. 进行膨胀操作时,将内核 划过图像,将内核 覆盖区域的最大相素值提取 ...
- bat获取当前日期的前一天
批处理做这样的事情很麻烦,你可以用cscript来实现,比如把下面的内容保存为a.js文件:var d=new Date();d.setTime(d.getTime()-24*3600*1000);v ...
- LAMP 系统服务搭建过程详解
LAMP 架构在企业里用得非常广泛,目前很多电商公司.游戏公司.移动互联网公司大多都采用这种架构.LAMP指的是Linux.Apache.MySQL.PHP.下面记录了 LAMP 架构系统服务的搭建过 ...
- web移动端
h5:低版本(IE8及以下不支持H5标签,要引入html5shiv.js才能正常运行) 条件引入,只是针对PC端,移动端不存在这样的操作 <figure>:专门用来存放图片和相关介绍的 & ...
- 2nd scrum站立会议
scrum站立会议 站立会议是让团队成员每日面对面站立互相交流他们所承担任务的进度.它的一个附带好处是让同组成员了解到工作的情况.本质上是为了团队交流,不是会议报告. 站立会议的目的: 1.让整个团队 ...