logo标签列表

如何在iOS 4上用两个手指滚动iframe？

iphoneiosipadiframe
3
我找到了许多相关问题，但没有一个答案解释如何在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使其可以在iOS 5上工作）：

<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像素？

你可以在这里尝试这个解决方案：https://dev59.com/42sy5IYBdhLWcg3w6iJZ#18699378 - Ali Ok
1个回答
1

在github.com/fancyapps上，rossb发布的一个简单的想法在iOS 4（2个手指）和iOS 5（1个手指）中都能很好地工作，并解决了iOS 5的iframes似乎存在的“滚动空白内容”问题。基本上，您不希望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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接