ios内iframe内容不能滚动的解决方案

原文地址：https://www.cnblogs.com/xieze/p/6702117.html

HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:

?

1 2 3

<div class= "scroll-wrapper" >   <iframe src= "" ></iframe> </div>

?

1	这个DIV将作为支持内部滚动的基础容器。

 

 

CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):

?

1 2 3 4 5 6 7 8

. scroll -wrapper {    -webkit-overflow-scrolling: touch;    overflow-y: scroll ;    /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */ } . scroll -wrapper iframe {    /* 你自己指定的样式 */ }

 

-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.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%; }