使IFRAME在iOS设备上支持滚动-阿里云开发者社区

开发者社区> 铁锚> 正文

使IFRAME在iOS设备上支持滚动

简介: 原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。
+关注继续查看
原文链接: 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代码
在使用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属性是设置在包装元素上,而不是设置到滚动元素自身上面的!


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
计算机基础2 | 学习笔记
快速学习计算机基础2。
11 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
冬季实战营第一期学习报告
通过五天学习与实操,对ECS云服务器入门、快速搭建LAMP环境、部署MySQL数据库、回顾搭建Docker环境和Spring Boot以及使用PolarDB和ECS搭建门户网站操作,对本期学习与实操的认识。
8 0
冬季实战营第一期:从零到一上手玩转云服务器实验报告
第一期主要进行了六次实验,分别是《动手实操ECS云服务器》、《动手实操快速搭建LAMP环境》、《使用ECS服务器部署MySQL数据库》、《通过workbench远程登录ECS,快速搭建Docker环境》、《从零搭建Spring Boot的Hello World》以及《使用PolarDB和ECS搭建门户网站》。首先远程登陆ECS实例,搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。然后配置及远程访问MySQL。冯晓帅老师在直播上带大家通过workbench登录ECS并快速搭建Docker环境,运行Spring Boot,最后安装WordPress并搭建博客。
8 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
铁锚
Java与数据库开发
271
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载