Menu
I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
BUT, all solutions have an issue: the iframe page is not completely displayed...
I tested on my iphone and ipad, the iframe page displays choppy.
any idea?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
924
This solution is a bit of a hack, but is tested and works fine on iOS:
<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
</object>
</div>
Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)
You can easily determine the client OS and only add this code to iOS devices.
119
I found a combination of div with "absolute" style and nicescroll do fix choppines.
You have to load nicescroll on the page loaded by iframe. In the same page wrap all you content with a div (with style absolute)
#content { position:absolute; }
Load nicescroll using wrapped div content.
$(document).ready(function() {
$("html").niceScroll("#content");
});
Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html
Automatically, with iOS native scroll has used, in other platform you got nicescroll active.
I have test on iPad with iOS 5.1.
37
Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.
In main page style:
iframe { -webkit-transform:translate3d(0,0,0); }
and in iframe style:
p { -webkit-transform:translate3d(0,0,0); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
