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 ...
随机推荐
- eclipse版本信息及操作系统
一.查看版本信息: 进入到eclipse安装目录下,有一个.eclipseproduct文件,用记事本打开,就可以知道版本了,后面version=的值就是版本 二.是否为32位操作系统: 找到ecli ...
- 20181120-10 Beta阶段第2周/共2周 Scrum立会报告+燃尽图 7
此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2415] 版本控制地址 [https://git.coding.n ...
- 第六周的PSP
本周PSP: 本周进度条: 累积进度图:: 本周PSP饼状图:
- 20172321 2018-2019《Java软件结构与数据结构》第三周学习总结
教材学习内容总结 第五章 5.1概述 队列是一种线性集合,其元素从一端加入,从另一端删除:队列的处理方式是先进先出(First in First out). 与栈的比较(LIFO) 栈是一端操作,先进 ...
- 404 Note Found队——现场编程
目录 组员职责分工 github 的提交日志截图 程序运行截图 程序运行环境 GUI界面 基础功能实现 运行视频 LCG算法 过滤(降权)算法 算法思路 红黑树 附加功能一 背景 实现 附加功能二(迭 ...
- 我是IT小小鸟读书笔记
阅读了我是IT小小鸟后发现,自己开发程序是真的很苦难的,在现在这个空对空的时期,我们学习到大部分的全都是理论知识,而没有真正的去进行实践.没有经过实践,我们在程序开发过程中也就无法发现自身的困难. 在 ...
- golang中的检验hash
1.对字符串进行hash 大家可以看一下, SHA1 Hashes Go by Example写道: The pattern for generating a hash is sha1.New(), ...
- QUdpSocket-Qt使用Udp通讯实现服务端和客户端
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QUdpSocket-Qt使用Udp通讯实现服务端和客户端 本文地址:https:// ...
- HDU 2162 Add ‘em
http://acm.hdu.edu.cn/showproblem.php?pid=2162 Problem Description Write a program to determine the ...
- Linux的计划任务
1. 语法格式:Minute Hour DayOfMonth Month DayOfWeek User Command Minute, 每个小时的第几分钟执行该任务Hour,每天的第几个小时执行该任务 ...