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>
好好学习,天天向上,有错欢迎指正!
关键词:
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/id3886.html
本文地址:http://www.tuquu.com/tutorial/id3886.html
这些是最新的
最热门的教程