【转】使IFRAME在iOS设备上支持滚动
原文鏈接:?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?)
HTML代碼
在使用IFRAME或者其他HTML元素時(shí),你需要使用一個(gè)元素(如DIV)來包裝他們:
這個(gè)DIV將作為支持內(nèi)部滾動(dòng)的基礎(chǔ)容器。
CSS 代碼
要讓IFRAME支持滾動(dòng),需要一個(gè)常用的CSS屬性和一個(gè)很少人知道的CSS屬性(property):
-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:
請(qǐng)收藏本文,以備查詢或使用.記得有這個(gè)CSS屬性是設(shè)置在包裝元素上,而不是設(shè)置到滾動(dòng)元素自身上面的!
轉(zhuǎn)載于:https://www.cnblogs.com/dhsx/p/4801036.html
總結(jié)
以上是生活随笔為你收集整理的【转】使IFRAME在iOS设备上支持滚动的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。