首页 > 代码库 > 使IFRAME在iOS设备上支持滚动
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS
原文日期: 2014年07月02日
翻译日期: 2014年07月10日
翻译人员: 铁锚
很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略. 通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!
(译者注: 当初自己调这个问题是通过JS来监听处理的,导致的问题是响应不太灵敏,而且需要处理各种浏览器兼容问题.)
点击查看示例程序(你可以用iPhone打开试试, 地址是: http://davidwalsh.name/demo/scroll-iframes-ios.php )
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
原文日期: 2014年07月02日
翻译日期: 2014年07月10日
翻译人员: 铁锚
很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略. 通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!
(译者注: 当初自己调这个问题是通过JS来监听处理的,导致的问题是响应不太灵敏,而且需要处理各种浏览器兼容问题.)
点击查看示例程序(你可以用iPhone打开试试, 地址是: http://davidwalsh.name/demo/scroll-iframes-ios.php )
支持滚动的 iframe 页面效果
HTML代码在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
<div class="scroll-wrapper"> <iframe src=http://www.mamicode.com/""></iframe>>这个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属性是设置在包装元素上,而不是设置到滚动元素自身上面的!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。