3

私は多くの関連する質問を見つけましたがiframe、iOS4で2本の指の方法を使用してスクロールする方法を説明する答えはありません。

aと属性を設定し、をdiv設定することで、2本の指で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、iOS4.3を実行しているiPad1では機能しません。これは、iOS 4で指の組み合わせでスクロールしない完全な例です（もちろん、-webkit-overflow-scrollingiOS5で動作することを許可します）：

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

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>
于 2012-05-29T22:01:22.603 に答える