HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
这个DIV将作为支持内部滚动的基础容器。
 
CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}
.scroll-wrapper iframe {
/* 你自己指定的样式 */
}

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

.demo-iframe-holder {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
} .demo-iframe-holder iframe {
height: 100%;
width: 100%;
}

转自:http://www.oicqzone.com/pc/2015040321369.html

【转】让iframe在iOS设备手机浏览器上支持滚动的更多相关文章

  1. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  2. 华为手机浏览器不支持PUT提交方式的解决方案

    最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...

  3. 怎么在手机浏览器上访问电脑本地的文件,局域网内,自建WiFi也可以

    首先,电脑要有Mysql+Apache+PHP环境,我直接用Wampsever,开启环境后手机和电脑要再同一个局域网内,然后电脑上打开win+R,输入cmd,再输入ipconfig,就可以看着这台的电 ...

  4. JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  5. 【转】使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...

  6. 使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...

  7. 作IFRAME于iOS您的设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...

  8. IOS设备对position的支持性

    最近在开发一个网页. 要嵌套在微信里 大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核 但是安卓版微信不会,他会默认使用自己的QQ浏览器和X5 ...

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

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

随机推荐

  1. 修改FFMpeg源码—捕获丢包

    概述 最近我们项目有一个需求就是解决客户端播放RTSP视频流花屏的问题,一般来说丢包就会引起花屏,导致客户端花屏的因素又有很多,比如说: 相机到服务器丢包 服务器到客户端丢包 等等... 其中服务器到 ...

  2. 编译器失败,错误代码为xxx

    问题:出现编译器失败,等一会儿出现csc.exe无响应,错误代码不一定是255,是其他的也可以试试 解决办法: 查看是否类似360之类的杀毒软件运行着,如果运行着,关掉然后重新试一下,应该就没有问题了 ...

  3. 1.5.2 什么是Analyzer--分析器

    分析器检查字段的文本,然后生成一个token流.在schema.xml中,分析器作为<fieldType>的一个子元素.在普通的使用当中,只有字段类型solr.TextField使用分析器 ...

  4. iOS retain、strong、weak、assign

    iOS retain.strong.weak.assign strong与weak是由ARC新引入的对象变量属性xcode 4.2(ios sdk4.3和以下版本)和之前的版本使用的是retain和a ...

  5. SOA资料

    实施: 基于J2EE体系架构搭建符合SOA架构的运营管理平台 成功经验: 携程旅行网在SOA架构方面的探索 SOA在互联网系统中的应用

  6. Unity3D 4.61 实现淡入淡出的场景过渡方法。

    还在学习过程中,如果有大大看到请指点. orz原来官方就有了更好的处理方法的教程,具体查看下面视屏. [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(五) 屏幕渐变效 ...

  7. JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法

    JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和Chrome上无法动作. (当时,在Chrome35.0上的时候还是可以的,Chrome36.0上就无法动作了 ...

  8. Oracle基础 exp/imp和expdp/impdp的区别:

    一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...

  9. POJ 2349 Arctic Network (最小生成树)

    Arctic Network Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Subm ...

  10. Android布局技巧

    postInvalidate();                            界面刷新 一个list元素可能默认为48pxandroid:visibility="invisibl ...