最近有个需求要把后台改成手机也能浏览，一些数据表格都是用的iframe，在手机上浏览iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在iphone,ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。
上网查了资料：
可以在iframe外加一层div,设置样式-webkit-overflow-scrolling:touch;overflow:scroll;让超出div的内容可以通过touch来滚动；
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果：
1 -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ 2 -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
示例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style type="text/css"> 7 .warpper { overflow: auto; -webkit-overflow-scrolling: touch; width: 500px; height: 500px; margin: 100px auto; border: 1px solid red; } 8 </style> 9 <body> 10 <div class="warpper"> 11 <iframe src="./iframe.html" frameborder="0" scrolling="yes"> 12 <!-- 嵌入的页面 --> 13 </iframe> 14 </div> 15 </body> 16 </html>
好好学习，天天向上，有错欢迎指正！