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

2020-07-26 03:15:00

字体：大中小

来源：转载

供稿：网友

问题描述：

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

问题重现：

结构：

index.html :

<style>　　#iframe{height:500px;}</style><div id="content">  <iframe frameborder="0" src="iframe.html" id="iframe"></iframe></div>

iframe.html:

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>IOS frame 滚动条 demo</title></head><body><div class="container">  我是一堆很长。很长，很高，很高的内容。</div><script src="../jquery.js"></script></body></html>

问题原因：

在IOS设备中，iframe内部的html的滚动条无法生效。

--------------------------------------------------------------------------------

解决办法：

把iframe中body里的内容全部包裹一层，然后设置包裹这一层的height，使用属性-webkit-overflow-scrolling:touch;overflow:auto;

代码如下：

iframe.html

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>IOS frame 滚动条 demo</title></head><body><style>#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}</style><div class="container">  我是一堆很长。很长，很高，很高的内容。</div><script src="../jquery.js"></script><script>  var UA = navigator.userAgent;  var forIOS = function(){    if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;}    if($('#wrapper').length){return;}    $('body').children().not('script').wrapAll('<div id="wrapper"></div>');  }();</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：IOS面试大全之常见算法

下一篇：iOS实现点击状态栏自动回到顶部效果详解