如何用 2 根手指在 iOS 4 中滚动 iframe？答案

【问题标题】：How can I scroll an iframe in iOS 4 with 2 fingers?如何用 2 根手指在 iOS 4 中滚动 iframe？
【发布时间】：2012-05-29 19:19:10
【问题描述】：

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

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

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

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

【问题讨论】：

您可以在这里尝试解决方案stackoverflow.com/a/18699378/768685

标签： iphone ios ipad iframe

【解决方案1】：

rossb @ github.com/fancyapps 发布的一个简单想法对于在 iOS 4（2 根手指）和 iOS 5（1 根手指）中滚动都非常有效，并解决了 iOS 5 的 iframe 似乎出现的“滚动时出现空白内容”问题被困扰。基本上，您不希望 iframe 处理任何滚动。给它一个固定的宽度/高度，并将可滚动内容包装在包含文件中的 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>

【讨论】：