作IFRAME于iOS您的设备上支持滚动
原始日期: 2014年07一个月02日本
翻译日期: 2014年07月10日
翻译人员: 铁锚
非常长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这样的问题对开发者来说一直是种折磨。 对原文作者的博客来说,这特别让人无奈,由于demo程序都是在沙箱IFRAMEs中执行的,这是为了不影响博客站点的AJAX页面载入策略. 通过一些研究发现,仅仅要设置两个CSS属性,以及加上一个元素,这个问题就攻克了. Here we go!
(译者注: 当初自己调这个问题是通过JS来监听处理的,导致的问题是响应不太灵敏,并且须要处理各种浏览器兼容问题.)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVuZnVmZWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
点击查看演示样例程序(你能够用iPhone打开试试, 地址是: http://davidwalsh.name/demo/scroll-iframes-ios.php )
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%;
}
请收藏本文,以供将来参考或使用.记住这一点CSS提供包装元素属性,代替上述滚动元件设置本身的!
作IFRAME于iOS您的设备上支持滚动的更多相关文章
- 【转】使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中超出边界的元素将不 ...
- HTML5的设计目的是为了在移动设备上支持多媒体
HTML5的设计目的是为了在移动设备上支持多媒体
- 【转】让iframe在iOS设备手机浏览器上支持滚动
HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...
- [css]解决iframe在ios设备上无法滚动
原因: safari的webkit内核特性 解决方案: 在iframe外包裹一层div并另外设置其css属性为如下: -webkit-overflow-scrolling:touch; overflo ...
- HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了
2007 年 W3C (万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下 ...
- 在ios android设备上使用 Protobuf (使用dll方式)
http://game.ceeger.com/forum/read.php?tid=13479 如果你的工程可以以.Net 2.0 subset模式运行,请看这个帖子中的方法. 地址:http://g ...
- (转)在ios android设备上使用 Protobuf (使用dll方式)
自:http://game.ceeger.com/forum/read.php?tid=13479 如果你的工程可以以.Net 2.0 subset模式运行,请看这个帖子中的方法. 地址:http:/ ...
- XE6 & IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.既然我们已经在真机上 ...
随机推荐
- Javascript和jquery事件--鼠标事件的小结
1.鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout. <1>其中mouseup和mous ...
- jmeter--十三种断言方式介绍
jmeter中有个元件叫做断言(Assertion),它的作用和loadrunner中的检查点类似: 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言 ...
- 9.8 Binder系统_c++实现_内部机制1
1. 内部机制_回顾binder框架关键点 binder进程通讯过程情景举例: test_server通过addservice向service_manager注册服务 test_client通过get ...
- 一些mysql innodb的建议
http://blog.csdn.net/yunhua_lee/article/details/8239145 原文:http://dev.mysql.com/doc/refman/5.5/en/in ...
- storm-kafka编程指南
目录 storm-kafka编程指南 一.原理及关键步骤介绍 (一)使用storm-kafka的关键步骤 1.创建ZkHosts 2.创建KafkaConfig 3.设置MultiScheme 4.创 ...
- 21、IIS声卡驱动程序
声卡芯片的数据通道一般都是IIS接口,但是控制音量等控制信息的接口都不相同 (新内核在linux-3.4.2\sound\soc\codecs\uda134x.c) uda134x_codec_pro ...
- java异常中Exception捕获不到的异常
一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...
- stl变易算法(一)
C++ STL的变易算法是一组可以改动容器元素数据的模板函数,可进行序列容器的复制.交换.替换.填充.移除.旋转等.这些算法对迭代器有较高的要求.详细的迭代器类型随各个算法而定,或向前迭代器.或双向迭 ...
- [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component
In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...
- [JS Compose] 2. Enforce a null check with composable code branching using Either
We define the Either type and see how it works. Then try it out to enforce a null check and branch o ...