原文鏈接:?Scroll IFRAMEs on iOS
原文日期: 2014年07月02日?
翻譯日期: 2014年07月10日
翻譯人員:?鐵錨

很長時(shí)間以來, iOS設(shè)備上Safari中超出邊界的元素將不能滾動(dòng),處理這種問題對(duì)開發(fā)人員來說一直是種折磨。 對(duì)原文作者的博客來說,這特別讓人無奈,因?yàn)閐emo程序都是在沙箱IFRAMEs中運(yùn)行的,這是為了不影響博客網(wǎng)站的AJAX頁面加載策略. ?通過一些研究發(fā)現(xiàn),只要設(shè)置兩個(gè)CSS屬性,以及加上一個(gè)元素,這個(gè)問題就解決了. Here we go!
(譯者注: 當(dāng)初自己調(diào)這個(gè)問題是通過JS來監(jiān)聽處理的,導(dǎo)致的問題是響應(yīng)不太靈敏,而且需要處理各種瀏覽器兼容問題.)

點(diǎn)擊查看示例程序(你可以用iPhone打開試試, 地址是: http://davidwalsh.name/demo/scroll-iframes-ios.php?)

支持滾動(dòng)的 iframe 頁面效果

HTML代碼
在使用IFRAME或者其他HTML元素時(shí),你需要使用一個(gè)元素(如DIV)來包裝他們:

[html]?view plaincopy

<div?class="scroll-wrapper">??

????<iframe?src=""></iframe>??

</div>??

這個(gè)DIV將作為支持內(nèi)部滾動(dòng)的基礎(chǔ)容器。

CSS 代碼
要讓IFRAME支持滾動(dòng),需要一個(gè)常用的CSS屬性和一個(gè)很少人知道的CSS屬性(property):

[css]?view plaincopy

.scroll-wrapper?{??

????-webkit-overflow-scrolling:?touch;??

????overflow-y:?scroll;??

????/*?提示:?請(qǐng)?jiān)诖颂幖由闲枰O(shè)置的大小(dimensions)或位置(positioning)信息!?*/??

}??

.scroll-wrapper?iframe?{??

????/*?你自己指定的樣式?*/??

}??

-webkit-overflow-scrolling: touch;?屬性值就是專為瀏覽器中溢出(overflow)時(shí)需要滾動(dòng)的元素設(shè)計(jì)的。 如果沒有指定這個(gè)屬性,當(dāng)你想滾動(dòng)iframe時(shí),實(shí)際上會(huì)導(dǎo)致外層頁面的滾動(dòng),通過它你就可以對(duì)IFRAME的滾動(dòng)進(jìn)行控制! 在原作者的博客站點(diǎn)中,使用了下面的CSS:

[css]?view plaincopy

.demo-iframe-holder?{??

??position:?fixed;???

??right:?0;???

??bottom:?0;???

??left:?0;??

??top:?0;??

??-webkit-overflow-scrolling:?touch;??

??overflow-y:?scroll;??

}??

??

.demo-iframe-holder?iframe?{??

??height:?100%;??

??width:?100%;??

}??

請(qǐng)收藏本文,以備查詢或使用.記得有這個(gè)CSS屬性是設(shè)置在包裝元素上,而不是設(shè)置到滾動(dòng)元素自身上面的!

轉(zhuǎn)載于:https://www.cnblogs.com/dhsx/p/4801036.html

總結(jié)

以上是生活随笔為你收集整理的【转】使IFRAME在iOS设备上支持滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。