c-aqqw
Last Updated: February 25, 2016
·
42.02K
· stffndtz

Scrollable iframe on mobile Safari

In order to make an iframe scrollable on iOs, you have to add the CSS3 property "-webkit-overflow-scrolling:touch" to the parent container.

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>

12 Responses
Add your response

5944

Thank you! You just spared me a whole morning of groping in the dark! ;-)

over 1 year ago ·
9316

Thank you! works perfectly!

over 1 year ago ·
9902

Worked like a charm! Thanks!

over 1 year ago ·
9930

Phew. Thanks!

over 1 year ago ·
9977

Yesssssss! This is the simplest, best answer to this problem I've found. Thank you!

over 1 year ago ·
11591

good one
but when i scrolling the page it jump to top page in some point,

it happened to somebody?

over 1 year ago ·
13875

Cool! fine tanks!

over 1 year ago ·
14510

Great! You saved my time! Thanks!

over 1 year ago ·
14631

Awesome! working fine. Thanks!

over 1 year ago ·
14815

I have the same issue for jump back to top when touch the page at some point. Anyone solve this issue? Thanks.

over 1 year ago ·
24968

I don't think this works: http://output.jsbin.com/sesenuziri

over 1 year ago ·
26274

It will jump to the top any time the iframe content changes. The only workaround that I can find is to explicitly set the height of the iframe to the height of the contents. Something like this (using jQuery).

$('iframe').load(function() {
var self = this;
var oldHeight = 0;
function resizeiframe(eventObject) {
var newHeight = $(self.contentWindow.document).height();
if (newHeight !== oldHeight) {
oldHeight = newHeight;
$(self).css("height", newHeight);
}
}
resizeiframe();
$(self.contentWindow).resize(resizeiframe);
});

over 1 year ago ·