使IFRAME在iOS设备上支持滚动

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属性是设置在包装元素上,而不是设置到滚动元素自身上面的!