0

PhoneGap で開発している HTML5/jQuery Mobile アプリがあります。このアプリを iOS に正常に展開し、現在 Android に移植しています。

このアプリを Android デバイス (Ice Cream Sandwich を実行している Samsung Galaxy S2) でテストすると、奇妙な動作に遭遇しました。

div 内に含まれる要素のリストがあり、その div の高さは固定です。また、CSS プロパティの overflow-y: scroll を使用して、モバイル ユーザーがリストをスクロールできるようにします。リストにはアンカー リンクが含まれています。このような：

<div style="display: block; width: 320px; height: 250px; overflow-y: scroll;">
    <a href="index1.html">Link 1</a>
    <a href="index2.html">Link 2</a>
    <a href="index3.html">Link 3</a>
    <a href="index4.html">Link 4</a>
</div>

アンカー リンクのリストがまだボックスの標準の高さの範囲内にある場合 (つまり、リストに少数の要素しかない場合)、問題なく動作します。リンクをタップすると、期待どおりに機能します。ただし、リンクのリストがボックスの高さを超えて拡大し、オーバーフロー y スクロールが有効になると、リンクをタップできなくなります。スクロールは完全に機能しますが、スクロール div 内の要素をタップできません!

奇妙なことに、どのリンクでもできないことは、ブラウザーのテキスト選択機能を使用してリンクを選択することです。スクロールするリンクが少なすぎる場合は可能ですが、スクロールがアクティブな場合は不可能です。

ICS を搭載した Galaxy S2 は、オーバーフロー y スクロールを適切にサポートするのに十分なほど新しいものであると想定していましたが、おそらく間違っています。これを機能させる方法について何か考えはありますか？バグや、Ice Cream Sandwich での overflow-y のサポートに関して、オンラインで特定のものを見つけることができないようです。

4

2 に答える 2

0

これらのリンクにタップ イベント ハンドラを直接追加できますか? jQuery Mobile では、リンクは見た目ほど単純ではありません。

iOS から始めたので、iOS 固有の css は残っていますか? iOS で適切なスクロールを行うには、3D 変換を追加してハードウェア アクセラレーションをトリガーする必要がある場合がありますが、Android では興味深い副作用が生じる可能性があります。

試してみる価値のあるもう 1 つのことは、overflow代わりに設定するoverflow-yことです。違いはありませんが、場合によっては違います。

于 2012-12-03T04:14:29.143 に答える
0

これは古い質問であることは知っていますが、現在のバージョンの phonegap/cordova でもまだ発生しているため、解決策が役立つと思います。

この問題を解決するには、変換プロパティを固定要素 (この場合はメインの div) に追加する必要があります。

div {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0, 0, 0);
}

クレジットはこちら

于 2015-07-10T11:10:12.280 に答える