all
I am facing an issue on safari ipad (both ios 7 and 8).
I have a page, in which the left part is a list and the right part is an iframe. When clicking the list item in the left, the right part will be directed to some page accordingly.
I need to support scrolling in the right part (iframe).
Currently, the right part is like:
<div style="display:block; position: absolute; overflow:auto; -webkit-overflow-scrolling: touch"><iframe src = 'xxxxx'>... </iframe></div>
xxx is dynamically generated in javascript when clicking the left part.
when iframe loaded, the page inside the iframe has a floating button bar, clicking the button can jump to different part of the iframe by scrolling it.
Now, when clicking any floating button in the bar, I use document.body.scrollTop = nnn ( or document.documentElement.scrollTop = nnn ) to scroll to different part. It works fine on desktop browsers (chrome, FF, IE, even safari). And, it scrolls the right part only, not the whole screen, which is what I want.
But, in ipad, in both ios 7 and 8, none of the floating buttons works. When clicked, you can see the iframe flashes, but not scrolls. User can still manually scrolls the iframe though.
Any suggestion on how to make this scrolling work programatically? Or, is this a known issue on ipad ?
Thanks.
Also ran into this post: Scroll iframe using buttons - iPhone, looks similar to my issue.
