2016-06-13 91 views
1

所以我有一個顯示Facebook頁面的iFrame,我試圖啓用本機「反彈」類型的滾動,但無法獲得任何工作。iOS - iFrame中的原生滾動

我已經試過這樣:

iframe { 
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; 
} 

但有沒有運氣到目前爲止 - 在兩個模擬器和真正的iOS設備進行測試。

任何想法?

+0

你知道iframe中頁面的高度嗎?因爲那麼你可以使用iScroll:http://cubiq.org/iscroll-5 – JoostS

+0

該頁面是從Facebook頁面拉,所以是無限滾動,所以沒有不幸... – dwinnbrown

回答

1

這將是我的做法......

步驟1.增加iframe的大小,直到滾動條dissappear,像這樣:http://davidjbradshaw.github.io/iframe-resizer/

第2步:使用大衛沃爾什他的把戲與父母DIV滾動iframe:https://davidwalsh.name/scroll-iframes-ios

但我認爲它會失敗,因爲缺乏跨域iFrames的身份驗證。

更新:如果您將基於父div的滾動位置放大iframe會怎麼樣?因此,父div滾動100px,你讓iframe 100px更大...(考慮到事實iframe有無限高度,並假設其滾動條被隱藏)

+0

不幸的是,我已經嘗試過 - 除非我' m做錯了什麼:https://jsfiddle.net/0g0xrLy0/ – dwinnbrown

+1

可能需要去圖api和自定義 – dwinnbrown

+1

對不起......但我也這麼認爲。 – JoostS

2

我面臨同樣的問題,當我們的團隊在iOS上構建epub3閱讀器應用程序。

跟着EpubJS v0.3 example,我們可以處理這個問題。

下面是一個例子:

<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;"> 
    <iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe> 
</div> 

注:你算算iframe的高度並設置CSS樣式(例如:8071px)。使用javascript,您可以使用 iframe.contentDocument.body.scrollHeight

您可能會問我why we have to set height style。跟着some suggestions不幫我們處理動態內容處理問題(可以看問題here)。通過設置高度,我們可以動態添加或刪除用戶的高亮文本。

希望有幫助,