ios上iframe滾動條失效

時間 2019-12-20

標籤 ios iframe 滾動條失效欄目 iOS 简体版

原文原文鏈接

最近有個需求要把後臺改爲手機也能瀏覽，一些數據表格都是用的iframe，在手機上瀏覽iframe設置了高度（例如500px）。假若iframe的內容足夠長超出了iframe設定的高度時，在iphone,ipad等設備上。iframe內部html的滾動條不出現。而且活生生的從500px處截斷，（相似overflow：hidden的效果）下面的內容再也不顯示。css

上網查了資料：html

能夠在iframe外加一層div,設置樣式-webkit-overflow-scrolling:touch;overflow:scroll;讓超出div的內容能夠經過touch來滾動；web

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果：iphone

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>

好好學習，每天向上，有錯歡迎指正！spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。