如何用2个手指在iOS 4中滚动iframe？ [英] How can I scroll an iframe in iOS 4 with 2 fingers?
问题描述
我发现了许多相关问题，但没有一个问题解答如何在iOS 4中使用2指法滚动 iframe 。
I've found many related questions but none with an answer that explains how to scroll an iframe using the 2 finger method in iOS 4.
通过设置宽度，我可以用2个手指滚动 div height 属性和设置溢出：滚动; 。这是一个更完整的例子：
I am able to scroll a div with 2 fingers by setting a width and height attribute and setting overflow: scroll;. Here's a more complete example of this:
<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 在我的iPad 1上运行iOS 4.3。这是一个完整的示例，不会在iOS 4中使用任何手指组合滚动（当然， -webkit-overflow-scrolling 允许它在iOS5上工作） ：
This same method isn't working on iframes on my iPad 1 running iOS 4.3. Here's a complete example that won't scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling allows it to work on 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 宽度和高度，则2手指滚动工作c $ c>到实际像素值，例如 height：1000px; ，但我永远不会知道iframe的内容有多高。所以，也许真正的问题是我怎样才能说服iOS 4中的移动Safari，这个 div 里面的 iframe 是确实大于280x200像素？
I must add that I can get 2 finger scrolling to work if I set the width and height of the iframe to actual pixel values, like height: 1000px;, but I will never know how tall the iframe's content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe inside of this div is indeed larger than 280x200 pixels?
推荐答案
rossb @ github.com/fancyapps发布的一个简单的想法非常适合在iOS中滚动4（2个手指）和iOS 5（1个手指）并解决iOS 5的iframe似乎受到困扰的滚动空白内容问题。基本上，您不希望iframe处理任何滚动。给它一个固定的宽度/高度，并将可滚动内容包装在 div 的 div c>中，滚动
A simple idea posted by rossb @ github.com/fancyapps worked beautifully for both scrolling in iOS 4 (2 fingers) and iOS 5 (1 finger) and solves the "blank content on scroll" issues that iOS 5's iframes seem to be plagued with. Basically, you don't want the iframe to handle any scrolling. Give it a fixed width/height and wrap the scrollable content in your included file in a div that can be scrolled.
以下是一个示例：
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html：
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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
