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

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

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

支持滾動的 iframe 頁面效果

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

[html]?view plaincopy

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

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

</div>??

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

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

[css]?view plaincopy

.scroll-wrapper?{??

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

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

????/*?提示:?請在此處加上需要設(shè)置的大小(dimensions)或位置(positioning)信息!?*/??

}??

.scroll-wrapper?iframe?{??

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

}??

-webkit-overflow-scrolling: touch;?屬性值就是專為瀏覽器中溢出(overflow)時需要滾動的元素設(shè)計的。 如果沒有指定這個屬性,當(dāng)你想滾動iframe時,實際上會導(dǎo)致外層頁面的滾動,通過它你就可以對IFRAME的滾動進(jì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%;??

}??

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

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

總結(jié)

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

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