iOS上滚动iframe解决了，但是iframe页面显示不完整 [英] Scrolling iframe on iOS is solved, BUT the iframe page display incomplete
问题描述
我正在尝试在iOS上滚动一个iframe，我成功了，它滚动得很好，参考:
自动使用 iOS 原生滚动，在其他平台上你会激活 nicescroll.
我在装有 iOS 5.1 的 iPad 上进行了测试.
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>
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.
这篇关于iOS上滚动iframe解决了，但是iframe页面显示不完整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
