Html iOS上滚动iframe解决了，但是iframe页面显示不完整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14183647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling iframe on iOS is solved, BUT the iframe page display incomplete
提问by Jove
I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:
我正在尝试在 iOS 上滚动 iframe，我成功了，它滚动得很好，参考：
http://home.jejaju.com/play/iframe-scroll.html
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
http://areaaperta.com/nicescroll/demo.html
BUT, all solutions have an issue: the iframe page is not completely displayed...
但是，所有解决方案都有一个问题：iframe 页面未完全显示...
I tested on my iphone and ipad, the iframe page displays choppy.
我在我的 iphone 和 ipad 上测试过，iframe 页面显示断断续续。
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>
采纳答案by InuYaksa
I found a combination of div with "absolute" style and nicescroll do fix choppines.
我发现 div 与“绝对”风格的组合和 nicescroll 可以修复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)
您必须在 iframe 加载的页面上加载 nicescroll。在同一个页面中用一个 div 包装你的所有内容（使用绝对样式）
#content { position:absolute; }
Load nicescroll using wrapped div content.
使用包装的 div 内容加载 nicescroll。
$(document).ready(function() {
$("html").niceScroll("#content");
});
Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html
链接到演示页面，因此您可以查看代码：http: //areaaperta.com/nicescroll/demo/iframe6.html
Automatically, with iOS native scroll has used, in other platform you got nicescroll active.
自动地，使用 iOS 原生滚动，在其他平台上你会激活 nicescroll。
I have test on iPad with iOS 5.1.
我在带有 iOS 5.1 的 iPad 上进行了测试。
回答by user2619064
This solution is a bit of a hack, but is tested and works fine on iOS:
这个解决方案有点麻烦，但经过测试并且在 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)
基本上，由于滚动在 DIV 中工作正常，因此您可以使用 object 标记嵌入页面代码。问题是，由于同源策略，您无法确定目标页面的尺寸。我发现设置一个巨大的页面大小是完全可行的（没有延迟或波涛汹涌的注意到......只是空白）
You can easily determine the client OS and only add this code to iOS devices.
您可以轻松确定客户端操作系统，只需将此代码添加到 iOS 设备即可。
回答by Jon Clagg
Try adding -webkit-transform:translate3d(0,0,0)to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.
尝试添加-webkit-transform:translate3d(0,0,0)到 iframe 样式和其中的所有元素以强制硬件加速 - 应该减少波动。
In main page style:
在主页样式中：
iframe { -webkit-transform:translate3d(0,0,0); }
and in iframe style:
和 iframe 风格：
p { -webkit-transform:translate3d(0,0,0); }
回答by Joakim Ekroos
I found this to be a problem with relatively positioned content inside the frame.
Get rid of this behavior when removing position: relative;
我发现这是框架内相对定位内容的问题。删除时摆脱这种行为position: relative;
