Question

我正在尝试在iOS上滚动iframe，我成功了，滚动得很好，参考：

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

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

但是，所有解决方案都存在问题：iframe页面未完全显示...

我在iphone和ipad上测试过，iframe页面显示不稳定。 enter image description here

任何想法？

示例：

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

这个解决方案有点像黑客，但经过测试并在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中工作正常，因此您使用object标签嵌入页面代码。问题是，由于原始策略相同，您无法确定目标网页的维度。我发现设置一个巨大的页面大小是完全可行的（没有注意到延迟或波动......只是空白区域）

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

Answer 2

我找到了div与“绝对”风格的组合，而nicescroll确实修复了choppines。

您必须在iframe加载的页面上加载nicescroll。在同一页面中用div（绝对样式）

包装所有内容

  #content {   position:absolute; }

使用包装的div内容加载nicescroll。

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

链接到演示页面，因此您可以查看代码：http://areaaperta.com/nicescroll/demo/iframe6.html

自动使用iOS本机滚动，在其他平台中，您可以使用nicescroll激活。

我在iPad上测试iOS 5.1。

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;

时摆脱此行为

在iOS上滚动iframe已解决，但iframe页面显示不完整

4 个答案: