I see this problem elsewhere, and I've tried implementing this solution here: https://stackoverflow.com/a/8923541
The issue, though, is that the overall body is then scrollable, because the height of the body has been set to the overall height of the iframe. I don't want the main page to scroll at all (we have a set height for the header, and the footer, and an iframe that scales to fit the rest of the height of the page). Setting the body to overflow: hidden turns off the scrolling in the iframe.
Here's a simple test version I've been working with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Iframe Test</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
var iframe = $("#frame");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
<style>
body { overflow: hidden;}
#frame {
height: 100%;
width: 100%;
}
#maincontent {
height: 300px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
</style>
</head>
<body>
<div id="maincontent">
<iframe src="working2.php" id="frame" name="frame" frameborder='0' scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
</html>
Has anybody got an actual working sample of an iframe with single touch scrolling? I can't get this to work after spending several hours on it and reading through tons of posts about it. I'm obviously doing something wrong, but can't figure it out.
