首页 > 上网技巧 > 电脑小技巧 > 让iframe在iOS设备手机浏览器上支持滚动

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

时间:2015-04-03 14:16 作者:QQ地带 我要评论

HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
 
  1. <div class="scroll-wrapper">   
  2.     <iframe src=""></iframe>   
  3. </div>   
 
这个DIV将作为支持内部滚动的基础容器。
 
CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):
 
  1. .scroll-wrapper {   
  2.     -webkit-overflow-scrolling: touch;   
  3.     overflow-y: scroll;   
  4.     /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */   
  5. }   
  6. .scroll-wrapper iframe {   
  7.     /* 你自己指定的样式 */   
  8. }   
 
-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:
 
  1. .demo-iframe-holder {   
  2.   position: fixed;    
  3.   right: 0;    
  4.   bottom: 0;    
  5.   left: 0;   
  6.   top: 0;   
  7.   -webkit-overflow-scrolling: touch;   
  8.   overflow-y: scroll;   
  9. }   
  10.    
  11. .demo-iframe-holder iframe {   
  12.   height: 100%;   
  13.   width: 100%;   
  14. }   
 

标签: iOS
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告