3

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

我可以通过设置 a和属性和设置div来用两根手指滚动 a 。这是一个更完整的示例：widthheightoverflow: 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>

同样的方法不适用于iframes运行 iOS 4.3 的 iPad 1。这是一个在 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>

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

4

1 回答 1

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>

一个文件.html：

<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
于 2012-05-29T22:01:22.603 回答