最近有個需求要把后台改成手機也能瀏覽，一些數據表格都是用的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>
好好學習，天天向上，有錯歡迎指正！