所以我有一個顯示Facebook頁面的iFrame,我試圖啓用本機「反彈」類型的滾動,但無法獲得任何工作。iOS - iFrame中的原生滾動
我已經試過這樣:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
但有沒有運氣到目前爲止 - 在兩個模擬器和真正的iOS設備進行測試。
任何想法?
所以我有一個顯示Facebook頁面的iFrame,我試圖啓用本機「反彈」類型的滾動,但無法獲得任何工作。iOS - iFrame中的原生滾動
我已經試過這樣:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
但有沒有運氣到目前爲止 - 在兩個模擬器和真正的iOS設備進行測試。
任何想法?
這將是我的做法......
步驟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有無限高度,並假設其滾動條被隱藏)
不幸的是,我已經嘗試過 - 除非我' m做錯了什麼:https://jsfiddle.net/0g0xrLy0/ – dwinnbrown
可能需要去圖api和自定義 – dwinnbrown
對不起......但我也這麼認爲。 – JoostS
我面臨同樣的問題,當我們的團隊在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)。通過設置高度,我們可以動態添加或刪除用戶的高亮文本。
希望有幫助,
你知道iframe中頁面的高度嗎?因爲那麼你可以使用iScroll:http://cubiq.org/iscroll-5 – JoostS
該頁面是從Facebook頁面拉,所以是無限滾動,所以沒有不幸... – dwinnbrown