ios上iframe滚动条失效

最新推荐文章于 2019-07-04 11:03:00 发布

weixin_33937499

最新推荐文章于 2019-07-04 11:03:00 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xcrh/p/6164622.html

本文介绍了一种解决移动端浏览器中iframe内容无法正常滚动的问题的方法。通过在外层添加div并设置-webkit-overflow-scrolling: touch及overflow: scroll样式，使得内容能够通过触摸滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个需求要把后台改成手机也能浏览，一些数据表格都是用的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>