ios上iframe滚动条失效

2017/12/4 17:02:29来源：互联网

最近有个需求要把后台改成手机也能浏览，一些数据表格都是用的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; /* 当手指从触摸屏上移开，滚动会立即停止 */

示例代码：

 <!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>

好好学习，天天向上，有错欢迎指正！

[教程作者：admin]

关键词：

免责声明：本站文章系图趣网整理发布，如需转载，请注明出处，素材资料仅供个人学习与参考，请勿用于商业用途！
本文地址：http://tuquu.com/tutorial/id3886.html

上一篇:无法单手操作？来看这两个新颖的交互方式是怎么做的！

下一篇:最常见的APP六种loading加载样式

ios上iframe滚动条失效

您可能还喜欢

网页教程分类

Macaron 马卡龙系色谱；附HC（16进制码）

@media适配不同尺寸的手机

干货分享！推荐8个高清无水印无版权可商用图

国外黄色网站系列欣赏之一

CutterMan-一个好用的ps切图插件

ps像素图放大边缘模糊？一步搞定

庞门正道：好好玩耍的点线面（上）

经典网页配色方案之无色系