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 ...
随机推荐
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
- 洛谷【P1057】传球游戏
https://www.luogu.org/problemnew/show/P1057 题目描述 在体育课上, 老师带着同学们一起做传球游戏. 游戏规则是这样的: n 个同学站成一个圆圈, 其中的一个 ...
- Java:重写equals()和hashCode()
Java:重写equals()和hashCode() 1.何时需要重写equals() 当一个类有自己特有的“逻辑相等”概念(不同于对象身份的概念). 2.设计equals() [1]使用instan ...
- gulp4.0 存在的错误信息 The following tasks did not complete: default,Did you forget to signal async completion?
当gulp为如下代码的时候: // 以下代码会执行在node环境下 const gulp = require( "gulp" ); // 创建一个gulp的任务 gulp.task ...
- JS 操作 checkbox(cc角色管理等)
1.获取选中的权限的个数 var size=$("input[name='privileges']:checked").size();
- “来用”Beta版使用说明
补发Beta版使用说明.Beta版与alpha版相比去掉了计算器,界面上没有太大变化. 1引言 1 .1编写目的 针对我们发布的Beta版本做出安装和使用说明,使参与内测的人员及用户了解软件的使用方法 ...
- Python 变量和常量及数据类型
一.变量的命名 变量由字母.数字和下划线组成.变量的第1个字符必须是字母或下划线. 二.变量的赋值 例: x = 1 三.局部变量 局部变量只能在函数或者代码段内使用. 四.全局变量 在函数之外定义的 ...
- Ubuntu系统升级内核方法
一.查看内核版本 $ uname-sr //查看内核版本 二.去Ubuntu网站http://kernel.ubuntu.com/~kernel-ppa/mainline/下载所需版本的deb文件 w ...
- lintcode-477-被围绕的区域
477-被围绕的区域 给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例 给出二维矩阵: X X X X X O O X X X O X X O ...
- 配置ip,使你的虚拟机可以被别人访问到,搭建服务器必备
我么一般配置虚拟机的时候,我们总是喜欢使用虚拟网段,但是这样别人有可能ping不通我的虚拟机的. 若是我们想要别人ping我们的ip ,则我们要跟改以下几个操作: 在我们的网络源的源模式中,你若是想在 ...