解决 iframe 在 ios 上不能滚动的问题

Posted 谢泽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决 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%; 
}

 

以上是关于解决 iframe 在 ios 上不能滚动的问题的主要内容,如果未能解决你的问题,请参考以下文章

解决safari中iframe嵌入不能滚动的问题

解决:iphone iframe内的页面不能滑动问题

带有 iframe 的嵌入式网站中的 iOS 滚动问题

为啥 iframe div 不能在 iPad 上滚动?

记一次包含iframe的需要滚动的元素不能滚动到底部的问题

iOS 可滚动 iFrame