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. 解决Intellij IDEA 通过archetype创建Maven项目缓慢的问题

    1.由于默认情况下,根据archetype创建maven项目会从网络下载catalog文件,导致创建maven项目缓慢 Searching for remote catalog: http://rep ...

  2. 下拉选择框加listview删除

    package com.downselect; import java.util.ArrayList; import android.R.array; import android.app.Activ ...

  3. ios-uitableviewcell展开

    #import <UIKit/UIKit.h> @interface ZSDHelpCell : UITableViewCell @property (weak, nonatomic) I ...

  4. 【Android 界面效果19】Android中shape的使用

    Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结: 先看下面的代码:         <shape>      ...

  5. Linux文件系统的barrier:启用还是禁用

    大多数当前流行的Linux文件系统,包括EXT3和EXT4,都将文件系统barrier作为一个增强的安全特性.它保护数据不被写入日记.但 是,在许多情况下,我们并不清楚这些barrier是否有用.本文 ...

  6. 转: DH密钥交换和ECDH原理

    转自:http://www.tuicool.com/articles/em6zEb DH密钥交换和ECDH原理 时间 2013-06-24 18:50:55  CSDN博客 原文  http://bl ...

  7. 转 【O2O案例】汽车后市场垂直化电子商务:平业模式解析

    核心提示:一.商业模式简介.汽车后市场垂直化电子商务是我在2010年初开始筹划,起因是在淘宝工作期间运营汽车类目后遇到很多问题无决,由于 一.商业模式简介. 汽车后市场垂直化电子商务是我在2010年初 ...

  8. asp.net 之 GC (垃圾回收机制)

    今天抽时间好好整理了下GC相关知识,看了CSDN和博客园的几篇文章,有了一定的简单了解,决定根据个人理解整合一份随笔写下来,望诸位指教. 一:基础问题 1.首先需要知道了解什么是GC? GC如其名,就 ...

  9. HTML5_注册表单的自动聚焦与占位文本

    首先看下面要使用HTML自动聚焦和占位文本的示例代码 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title> ...

  10. Flask Restful Small Demo

    参考: http://www.pythondoc.com/flask-restful/first.html 什么是Rest Client-Server:服务器端与客户端分离. Stateless(无状 ...