1

So I have an iFrame displaying a Facebook page and I am trying to enable the native 'bounce' type scrolling however can't get anything to work.

I have tried this:

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

But have had no luck so far - tested on both simulator and real iOS device.

Any ideas?

dwinnbrown
  • 3,789
  • 9
  • 35
  • 60

2 Answers2

3

I faced the same problem when our team built epub3 reader app on iOS.

Followed EpubJS v0.3 example, we could handle the problem.

Here is an 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>

Note: you have to calculate iFrame height and set the CSS style (ex: 8071px). Using javascript, you can use iframe.contentDocument.body.scrollHeight

You may ask me why we have to set height style. Followed some suggestions does not help us to handle handle dynamic content problem (you can see the problem here). By setting height, we can dynamically add or remove highlight texts of users.

Hope that helps,

Community
  • 1
  • 1
Xuân-Lợi Vũ
  • 551
  • 5
  • 14
1

This would be my approach...

Step 1. Increasing the size of the iframe until the scrollbars dissappear, like this: http://davidjbradshaw.github.io/iframe-resizer/

Step 2. Use David Walsh his trick with a parent div that scrolls the iframe: https://davidwalsh.name/scroll-iframes-ios

But I think it will fail, because of the lack of authentication for cross domain iFrames.

UPDATE: What if you would enlarge the iframe based on the scroll position of the parent div? So parent div scrolls 100px and you make the iframe 100px larger... (given the fact that the iframe has infinite height and assuming its scrollbar is hidden)

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60