Question

我发现了许多相关问题，但没有一个问题解答如何在iOS 4中使用2指法滚动iframe。

我可以通过设置div和width属性并设置height，用两根手指滚动overflow: scroll;。这是一个更完整的例子：

<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
      Just imagine a bunch of content is in here, spanning well over 200px
      worth of height. You can scroll this just fine in iOS 4 by using 2 
      fingers, or in iOS 5 by swiping 1 finger thanks to 
      "-webkit-overflow-scrolling: touch;".
</div>

同样的方法在运行iOS 4.3的iPad 1上的iframes上无效。这是一个完整的示例，不会在iOS 4中使用任何手指组合滚动（当然，-webkit-overflow-scrolling允许它在iOS5上工作）：

<html>
<head>
    <style type="text/css">
    #scroller {
        width: 280px;
        height: 200px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #scroller iframe {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>

<div id="scroller">
    <iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>

</body>
</html>

我必须添加，如果我设置width和height iframe，我可以让2个手指滚动工作实际像素值，如height: 1000px;，但我永远不会知道iframe的内容有多高。那么，也许真正的问题是如何让iOS 4中的移动Safari相信这个iframe内的div确实大于280x200像素？

Answer 1

rossb @ github.com/fancyapps发布的一个简单的想法非常适合在iOS 4（2个手指）和iOS 5（1个手指）中滚动，并解决iOS 5的iframe似乎的“滚动空白内容”问题被困扰着。基本上，您不希望iframe处理任何滚动。给它一个固定的宽度/高度，并将可滚动内容包装在{em>可滚动的div中。>

以下是一个例子：

<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>

A-file.html：

<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>

如何用2个手指在iOS 4中滚动iframe？

1 个答案: