这篇文章一样,用到了-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上不能滚动问题解决的更多相关文章

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

    HTML代码在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper">  <i ...

  2. iOS 与 惯性滚动

    注:以下所有例子均 只 在 iOS 的微信中测试过,但对于饿了么APP的内置浏览器同样适用(两者使用相同内核) 引题 工作中常常有需要显示大量信息的情况,列表超出一屏就涉及到滚动的问题.例如 - va ...

  3. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  4. ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行

    https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...

  5. 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  6. 细数iOS上的那些安全防护

    细数iOS上的那些安全防护  龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...

  7. 微信双开是定时炸弹?关于非越狱iOS上微信分身高危插件ImgNaix的分析

    作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...

  8. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  9. :active 为什么在ios上失效

    :active是针对鼠标,而手机上是没有鼠标,而是touchstart,所以早成了ios上不兼容 解决方法是: window.onload = function(){ document.body.ad ...

随机推荐

  1. UGUI简易摇杆

    实现 直接使用系统自带圆形控件图标 编写脚本, 实现UGUI拖拽事件 将多拽范围限定于给定半径和圆心的圆内 计算出等同于Input.GetAxis()的值,直接控制被控制物体 代码 using Sys ...

  2. django中model字段与属性

    model field 类型1.AutoField     一个自增的IntegerField,一般不直接使用,Django会自动给每张表添加一个自增的primary key. 2.BigIntege ...

  3. 415. Valid Palindrome【LintCode java】

    Description Given a string, determine if it is a palindrome, considering only alphanumeric character ...

  4. 设计模式C++实现(1)——策略(Strategy)模式

    目录 策略模式 应用案例 实现的关键 Talk is cheap,let's See The Code 设计思想 参考 策略模式 策略模式定义了一系列算法和行为(也就是策略),他们可以在运行时相互替换 ...

  5. CentOS7部署ELK5.2

    原文发表于cu:2017-02-10 参考文档: Elasticsearchyum文档:https://www.elastic.co/guide/en/elasticsearch/reference/ ...

  6. 直接抱过来dd大牛的《背包九讲》来做笔记

    P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...

  7. UVA 10328 - Coin Toss dp+大数

    题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...

  8. lintcode-407-加一

    407-加一 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照大小进行排列,最大的数在列表的最前面. 样例 给定 [1,2,3] 表示 123, 返回 [1,2,4 ...

  9. 《DWZ笔记一》<select>动态联动菜单

    联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...

  10. Beta 阶段项目计划

    Beta 阶段项目计划 NewTeam 目标 实现用户数量的目标. 在多个平台发布 完成稳定运行.界面优雅的客户端 充分测试,避免发布后出现bug影响用户使用 及时更新开发文档 合理安排时间,避免和其 ...