【转】让iframe在iOS设备手机浏览器上支持滚动
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
.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设备手机浏览器上支持滚动的更多相关文章
- css3在不同型号手机浏览器上的兼容一览表
网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看. 以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持 ...
- 华为手机浏览器不支持PUT提交方式的解决方案
最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...
- 怎么在手机浏览器上访问电脑本地的文件,局域网内,自建WiFi也可以
首先,电脑要有Mysql+Apache+PHP环境,我直接用Wampsever,开启环境后手机和电脑要再同一个局域网内,然后电脑上打开win+R,输入cmd,再输入ipconfig,就可以看着这台的电 ...
- JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...
- 【转】使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...
- 使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...
- 作IFRAME于iOS您的设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...
- IOS设备对position的支持性
最近在开发一个网页. 要嵌套在微信里 大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核 但是安卓版微信不会,他会默认使用自己的QQ浏览器和X5 ...
- [css]解决iframe在ios设备上无法滚动
原因: safari的webkit内核特性 解决方案: 在iframe外包裹一层div并另外设置其css属性为如下: -webkit-overflow-scrolling:touch; overflo ...
随机推荐
- 解决Intellij IDEA 通过archetype创建Maven项目缓慢的问题
1.由于默认情况下,根据archetype创建maven项目会从网络下载catalog文件,导致创建maven项目缓慢 Searching for remote catalog: http://rep ...
- 下拉选择框加listview删除
package com.downselect; import java.util.ArrayList; import android.R.array; import android.app.Activ ...
- ios-uitableviewcell展开
#import <UIKit/UIKit.h> @interface ZSDHelpCell : UITableViewCell @property (weak, nonatomic) I ...
- 【Android 界面效果19】Android中shape的使用
Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结: 先看下面的代码: <shape> ...
- Linux文件系统的barrier:启用还是禁用
大多数当前流行的Linux文件系统,包括EXT3和EXT4,都将文件系统barrier作为一个增强的安全特性.它保护数据不被写入日记.但 是,在许多情况下,我们并不清楚这些barrier是否有用.本文 ...
- 转: DH密钥交换和ECDH原理
转自:http://www.tuicool.com/articles/em6zEb DH密钥交换和ECDH原理 时间 2013-06-24 18:50:55 CSDN博客 原文 http://bl ...
- 转 【O2O案例】汽车后市场垂直化电子商务:平业模式解析
核心提示:一.商业模式简介.汽车后市场垂直化电子商务是我在2010年初开始筹划,起因是在淘宝工作期间运营汽车类目后遇到很多问题无决,由于 一.商业模式简介. 汽车后市场垂直化电子商务是我在2010年初 ...
- asp.net 之 GC (垃圾回收机制)
今天抽时间好好整理了下GC相关知识,看了CSDN和博客园的几篇文章,有了一定的简单了解,决定根据个人理解整合一份随笔写下来,望诸位指教. 一:基础问题 1.首先需要知道了解什么是GC? GC如其名,就 ...
- HTML5_注册表单的自动聚焦与占位文本
首先看下面要使用HTML自动聚焦和占位文本的示例代码 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title> ...
- Flask Restful Small Demo
参考: http://www.pythondoc.com/flask-restful/first.html 什么是Rest Client-Server:服务器端与客户端分离. Stateless(无状 ...