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>Written by Steffen Dietz
Related protips
12 Responses
Thank you! You just spared me a whole morning of groping in the dark! ;-)
Thank you! works perfectly!
Worked like a charm! Thanks!
Yesssssss! This is the simplest, best answer to this problem I've found. Thank you!
good one
but when i scrolling the page it jump to top page in some point,
it happened to somebody?
Cool! fine tanks!
Great! You saved my time! Thanks!
Awesome! working fine. Thanks!
I have the same issue for jump back to top when touch the page at some point. Anyone solve this issue? Thanks.
I don't think this works: http://output.jsbin.com/sesenuziri
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);
});
Awesome that worked perfectly for iphone!! What would the equivalent be for android?
