您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 交互設(shè)計 >> 瀏覽設(shè)計教程

ios上iframe滾動條失效

最近有個需求要把后臺改成手機也能瀏覽,一些數(shù)據(jù)表格都是用的iframe,在手機上瀏覽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]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/id3886.html
無法單手操作?來看這兩個新穎的交互方式是怎么做的!
最常見的APP六種loading加載樣式
圖趣網(wǎng)微信
建議反饋
×