ios上iframe滾動(dòng)條失效

2017/12/4 17:02:29來(lái)源：互聯(lián)網(wǎng)

最近有個(gè)需求要把后臺(tái)改成手機(jī)也能瀏覽，一些數(shù)據(jù)表格都是用的iframe，在手機(jī)上瀏覽iframe設(shè)置了高度（例如500px）。倘若iframe的內(nèi)容足夠長(zhǎng)超出了iframe設(shè)定的高度時(shí)，在iphone,ipad等設(shè)備上。iframe內(nèi)部html的滾動(dòng)條不出現(xiàn)。并且活生生的從500px處截?cái)?，（?lèi)似overflow：hidden的效果）下面的內(nèi)容不再顯示。

上網(wǎng)查了資料：

可以在iframe外加一層div,設(shè)置樣式-webkit-overflow-scrolling:touch;overflow:scroll;讓超出div的內(nèi)容可以通過(guò)touch來(lái)滾動(dòng)；

-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果：

1 -webkit-overflow-scrolling: touch; /* 當(dāng)手指從觸摸屏上移開(kāi)，會(huì)保持一段時(shí)間的滾動(dòng) */2 -webkit-overflow-scrolling: auto; /* 當(dāng)手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì)立即停止 */

示例代碼：

 <!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">   <!-- 嵌入的頁(yè)面 -->         </iframe>    </div>    </body> </html>

好好學(xué)習(xí)，天天向上，有錯(cuò)歡迎指正！

[教程作者：admin]

關(guān)鍵詞：

免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/id3886.html

上一篇:無(wú)法單手操作？來(lái)看這兩個(gè)新穎的交互方式是怎么做的！

下一篇:最常見(jiàn)的APP六種loading加載樣式

您可能還喜歡

這些是最新的

最熱門(mén)的教程

ios上iframe滾動(dòng)條失效

您可能還喜歡

網(wǎng)頁(yè)教程分類(lèi)