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 ...
随机推荐
- 原生WebGL场景中绘制多个圆锥圆柱
前几天解决了原生WebGL开发中的一个问题,就是在一个场景中绘制多个几何网格特征不同的模型,比如本文所做的绘制多个圆锥和圆柱在同一个场景中,今天抽空把解决的办法记录下来,同时也附上代码.首先声明,圆柱 ...
- Echarts-K线图提示框改头换面
工作: 使用Hbuilder建web工程,加入echarts相关库,根据需要更改K线图及其的提示样式,去除默认提示,使用异步加载echarts的数据,数据格式为json. 需要注意的K线图和5日均线, ...
- Buy the Ticket HDU 1133 卡特兰数应用+Java大数
Problem Description The "Harry Potter and the Goblet of Fire" will be on show in the next ...
- 超级迷宫需求分析与建议-NABCD模型
超级迷宫需求分析与建议-NABCD模型 制作者-姜中希 1N-Need 需求 首先这是一个手机游戏风靡的时代,随着智能手机不断的更新问世,4G网络的不断扩大普及,越来越多的手机游戏受到广大玩家的追捧 ...
- Java中的网络编程-2
Socket编程:(一般的网络编程) <1> 两个 JAVA 应用程序可通过一个双向的网络通信连接, 实现数据交换, 这个双向链路的一段称为一个 Socket. <2> Soc ...
- PXE Centos7和Centos6
外网网卡:192.168.23.10, 内网网卡:192.168.10.2 PXE(preboot execute environment,预引导执行环境)是由Intel公司开发的最新技术,工作于Cl ...
- 复利计算器Junit单元测试
一.测试场景 测试模块 测试输入 预期结果 运行结果 bug跟踪 复利计算 (本金,利率,年限,次数) 终值 测试运算结果 (100,5,3,1) 115.76 115.76 测试输入负数 ...
- Alpha阶段事后诸葛亮分析
事后诸葛亮分析 一.设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件可供各类人群闲暇时间消遣娱乐,锻炼脑力. 定义的很清楚,就是一个定位 ...
- 【beta】Scrum站立会议第6次....11.8
小组名称:nice! 组长:李权 成员:于淼 刘芳芳韩媛媛 宫丽君 项目内容:约跑app(约吧) 时间:2016.11.8 12:00——12:30 地点:传媒西楼220室 本次对beta阶段 ...
- C语言添加宏开关
原文地址:http://blog.csdn.net/cp1300/article/details/7773239 我们在写程序的时候,总是或多或少会加入一些printf之类的语句用于输出调试信息,但是 ...