ios上iframe滾動條失效
2017/12/4 17:02:29來源：互聯(lián)網(wǎng)
最近有個需求要把后臺改成手機(jī)也能瀏覽，一些數(shù)據(jù)表格都是用的iframe，在手機(jī)上瀏覽iframe設(shè)置了高度（例如500px）。倘若iframe的內(nèi)容足夠長超出了iframe設(shè)定的高度時，在iphone,ipad等設(shè)備上。iframe內(nèi)部html的滾動條不出現(xiàn)。并且活生生的從500px處截斷，（類似overflow：hidden的效果）下面的內(nèi)容不再顯示。
上網(wǎng)查了資料：
可以在iframe外加一層div,設(shè)置樣式-webkit-overflow-scrolling:touch;overflow:scroll;讓超出div的內(nèi)容可以通過touch來滾動；
-webkit-overflow-scrolling 屬性控制元素在移動設(shè)備上是否使用滾動回彈效果：
1 -webkit-overflow-scrolling: touch; /* 當(dāng)手指從觸摸屏上移開，會保持一段時間的滾動 */2 -webkit-overflow-scrolling: auto; /* 當(dāng)手指從觸摸屏上移開，滾動會立即停止 */
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css"> .warpper { overflow: auto; -webkit-overflow-scrolling: touch; width: 500px; height: 500px; margin: 100px auto; border: 1px solid red; } </style> <body> <div class="warpper"> <iframe src="./iframe.html" frameborder="0" scrolling="yes"> <!-- 嵌入的頁面 --> </iframe> </div> </body> </html>
好好學(xué)習(xí)，天天向上，有錯歡迎指正！
[教程作者：admin]
關(guān)鍵詞：
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個人學(xué)習(xí)與參考，請勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/id3886.html
本文地址：http://irelandcustomcontracting.com/tutorial/id3886.html
這些是最新的
最熱門的教程
