IOS上iframe的滚动条失效的解决办法

本文转载自:https://www.jb51.net/article/92014.htm,感谢作者。

属于一篇兼容性问题总结

这篇文章主要为大家详细介绍了IOS上iframe的滚动条失效的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

问题描述
iframe设置了高度(例如500px)。倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示。

问题重现

结构:
index.html :

iframe.html:

问题原因
在IOS设备中,iframe内部的html的滚动条无法生效。

解决办法
把iframe中body里的内容全部包裹一层,然后设置包裹这一层的height,使用属性-webkit-overflow-scrolling:touch;overflow:auto;
代码如下:

iframe.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复