【转】让iframe在iOS设备手机浏览器上支持滚动
2016-03-10 10:11
411 查看
HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
这个DIV将作为支持内部滚动的基础容器。
CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):
-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:
转自:http://www.oicqzone.com/pc/2015040321369.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%; }
转自:http://www.oicqzone.com/pc/2015040321369.html
相关文章推荐
- iOS开发动画(Animation)总结
- 关于IOS delegate的weak和assign 探讨
- iOS Github最近很火的夜间模式
- 自定义导航searchBar
- iOS猜拳游戏源码
- 全面理解iOS开发中的Scroll View
- ios html5 网页取消默认样式
- 【Xamarin挖墙脚系列:打造独特的Xamarin.IOS开发环境】
- oc 10进制数转16进制字符串
- nagios+plugin+pnp4nagios+rrdtool实现图形化监控
- iOS开发中常用第三方库的整理
- 深入解析iOS应用开发中九宫格视图布局的相关计算方法
- iOS Socket UDP编程-C语言版
- iOS Socket理论知识
- IOS中关于NSTimer使用知多少
- iOS个人整理25-瀑布流效果
- iOS 修改navigation的back按钮
- iOS9 适配,白名单,支付宝支付时不跳转
- ios 删除Main.storyboard和 Launch.storyboard
- nagios插件之登陆router监控vrrp状态