HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:

  1. <div class="scroll-wrapper">
  2.  <iframe src=""></iframe>
  3. </div>
  1. 这个DIV将作为支持内部滚动的基础容器。

CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):

  1. .scroll-wrapper {
  2. -webkit-overflow-scrolling: touch;
  3. overflow-y: scroll;
  4. /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
  5. }
  6. .scroll-wrapper iframe {
  7. /* 你自己指定的样式 */
  8. }

-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:

  1. .demo-iframe-holder {
  2. position: fixed;
  3. right: 0;
  4. bottom: 0;
  5. left: 0;
  6. top: 0;
  7. -webkit-overflow-scrolling: touch;
  8. overflow-y: scroll;
  9. }
  10.  
  11. .demo-iframe-holder iframe {
  12. height: 100%;
  13. width: 100%;
  14. }

解决 iframe 在 ios 上不能滚动的问题的更多相关文章

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

    同这篇文章一样,用到了-webkit-overflow-scrolling: touch;属性.主要解决方案是在iframe外层添加一个div,然后设置-webkit-overflow-scrolli ...

  2. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

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

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

  4. [css]解决iframe在ios设备上无法滚动

    原因: safari的webkit内核特性 解决方案: 在iframe外包裹一层div并另外设置其css属性为如下: -webkit-overflow-scrolling:touch; overflo ...

  5. 解决iframe在移动端(主要iPhone)上的问题

    前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...

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

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

  7. 解决protobuf不能直接在IOS上使用,利用protobuf-net在IOS上通讯

    ---------------------------------------------------------------------------------------------------- ...

  8. document.onclick在ios上不触发的解决方法与touchstart点击穿透处理

    document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; ...

  9. 【转】iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法

    iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...

随机推荐

  1. Mybatis第六篇【配置文件和映射文件再解读、占位符、主键生成与获取、Mapper代理】

    配置文件和映射文件再解读 映射文件 在mapper.xml文件中配置很多的sql语句,执行每个sql语句时,封装为MappedStatement对象,mapper.xml以statement为单位管理 ...

  2. Java中增强for循环的用法

    此方法在jdk1.5之后才出现. 1:遍历数组 语法: for (Type value : array) { expression value; } 例子: void Sum() { int[] ar ...

  3. MX4拍摄视频转码方法

    问题 使用魅族4手机拍摄的视频,其视频编码是H.265 目前大多数设备不支持解码,表现为常用播放器无法正常播放视频,剪辑软件无法剪辑视频. 解决方案 使用软件进行转码,期间尝试软件如下: 爱剪辑 部分 ...

  4. [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

  5. Linux(centos)环境下Lamp环境搭建,成功版。

    搭建环境必须条件:1.Linux环境,2.Apache,3.mysql ,4.PHP,搭建步骤如下 1.开启Linux,得到root权限:sudo su 接下来输入登录密码,进入root权限,因为安装 ...

  6. 在MAC OS X中默认的Web共享目录

    在Mac OS X中可以很方便的通过开启"Web共享"启用Apache服务:设置方法如下: 打开"系统设置偏好(System Preferences)" -&g ...

  7. Jenkins 在声明式 pipeline 中并行执行任务

    在持续集成的过程中,并行的执行那些没有依赖关系的任务可以缩短整个执行过程.Jenkins 的 pipeline 功能支持我们用代码来配置持续集成的过程.本文将介绍在 Jenkins 中使用声明式 pi ...

  8. 基于maven创建和部署Webx项目

    1.准备工作 下载 Webx Maven 项目的目录结构Artifact插件. archetype-webx-quickstart-1.0.tar.gz插件:http://central.maven. ...

  9. yeah,我的博客成功建立!

    以此来记录我个人的学习历程!~~

  10. Elixir游戏服设计二

    搞一个例子,而没有实际的目标,做起来真是烦人.几次三番都想放弃. 后来想想,即使最后完成不了完整的服务器,把需要的知识点搞搞,摸熟悉也是好的. 这里没有完整的项目目录,主要是对需要的指点进行整理.要完 ...