IOS上iframe的滾動條失效的解決辦法
編輯：IOS開發綜合
問題描述：
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實現點擊狀態欄自動回到頂部效果詳解
相關文章
+