7

我正在尝试在 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>
4

4 回答 4

6

这个解决方案有点 hack，但是在 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 设备。

于 2013-07-25T14:12:16.437 回答
5

我发现 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。

我在装有 iOS 5.1 的 iPad 上进行了测试。

于 2013-01-08T20:40:05.200 回答
3

尝试添加-webkit-transform:translate3d(0,0,0) 到 iframe 样式和其中的所有元素以强制硬件加速 - 应该减少波动。

在主页样式中：

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

在 iframe 样式中：

p { -webkit-transform:translate3d(0,0,0); }
于 2013-01-07T03:54:57.223 回答
1

我发现这是框架内相对定位的内容的问题。删除时摆脱这种行为position: relative;

于 2013-10-29T11:33:21.633 回答