I've found many related questions but none with an answer that explains how to scroll an iframe
using the 2 finger method in iOS 4.
I am able to scroll a div
with 2 fingers by setting a width
and height
attribute and setting overflow: scroll;
. Here's a more complete example of this:
<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
Just imagine a bunch of content is in here, spanning well over 200px
worth of height. You can scroll this just fine in iOS 4 by using 2
fingers, or in iOS 5 by swiping 1 finger thanks to
"-webkit-overflow-scrolling: touch;".
</div>
This same method isn't working on iframes
on my iPad 1 running iOS 4.3. Here's a complete example that won't scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling
allows it to work on iOS5):
<html>
<head>
<style type="text/css">
#scroller {
width: 280px;
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#scroller iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>
</body>
</html>
I must add that I can get 2 finger scrolling to work if I set the width
and height
of the iframe
to actual pixel values, like height: 1000px;
, but I will never know how tall the iframe's content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe
inside of this div
is indeed larger than 280x200 pixels?