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