滚动iOS上的iframe解决，但在iframe页面显示不全(Scrolling iframe on

我试图滚动iOS上的iframe，我成功了，它的滚动的好，参考：

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

但所有的解决方案有一个问题：在iframe页面显示不全？

我在我的iPhone和iPad进行测试时，iframe页面显示不连贯。

任何的想法？

例：

<!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>

Answer 1:

我发现股利与“绝对”的风格和nicescroll做修复choppines的组合。

你必须加载nicescroll通过iframe中加载的页面上。在同一个页面包装所有你一个div内容（与风格绝对）

  #content {   position:absolute; }

加载nicescroll使用包裹格的内容。

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

链接到演示页，这样你就可以检查代码： http://areaaperta.com/nicescroll/demo/iframe6.html

自动，与iOS原生滚动使用了，在其他平台上你有nicescroll活跃。

我对iPad的测试与iOS 5.1。

Answer 2:

该解决方案是一个黑客位，但经过测试，在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>

基本上，因为滚动的DIV精品工程，您使用嵌入的对象标记你的页面的代码。问题是，由于同源策略，你不能确定你的目标页面的尺寸。我发现，设置一个巨大的页面大小是完全可行的（无延迟或choppyness注意到...只是空格）

您可以轻松地确定客户端操作系统和仅此代码添加到iOS设备。

Answer 3:

试着增加-webkit-transform:translate3d(0,0,0)的IFRAME的风格和内力的硬件加速的所有元素-应该减少抖动现象。

在主要页面样式：

iframe {  -webkit-transform:translate3d(0,0,0); }

在IFRAME的风格：

p { -webkit-transform:translate3d(0,0,0); }

Answer 4:

我发现这是与所述框架内相对定位的内容的问题。摆脱这种行为拆卸时position: relative;

文章来源: Scrolling iframe on iOS is solved, BUT the iframe page display incomplete