码迷,mamicode.com
首页 > 移动开发 > 详细

【转】让iframe在iOS设备手机浏览器上支持滚动

时间:2016-03-10 10:35:59      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

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

【转】让iframe在iOS设备手机浏览器上支持滚动

标签:

原文地址:http://www.cnblogs.com/gebenhagen/p/5260767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!