使iFrame在iOS设备上支持滚动

文章2015-04-061,453 人已阅来源:网络

很长时间以来,IOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。

对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略。通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了。

Here we go!(译者注:当初自己调这个问题是通过JS来监听处理的,导致的问题是响应不太灵敏,而且需要处理各种浏览器兼容问题。)

需要实现的效果:

 使IFRAME在iOS设备上支持滚动

解决方案:

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的滚动进行控制!

原文链接: Scroll IFRAMEs on iOS

原文日期: 2014年07月02日

翻译日期: 2014年07月10日

翻译人员: 铁锚