3

Retinaを搭載したiPadでHTML5を使用して無限リストを開発しています。アイデアは、2 つのページをレンダリングしてから最初のページを削除し、次のページをリストの一番下に追加することです。デスクトップ Safari と Chrome では問題なく動作しますが、iPad では動作しません。

この例には 2 つのページがあります。すべてのメッセージの高さは同じ 120 ピクセルですが、最初のメッセージの高さは 300 ピクセルです。問題を再現するには、一番下までスクロールして LoadMore ボタンを押すと、ジャンプして正しい位置に移動します。スクロールと削除の間にわずかな遅延があるようです。これで、すべてのメッセージが同じ 120px の高さになり、一番下でスクロールしてボタンをもう一度クリックしても、ジャンプはなく、期待どおりに動作します。再起動ボタンを押すと再起動します。

例にリンクします。

レイアウト：

<div class="container"><div class="innerContainer">
  <div class="page">
    <div class="message" style="height:300px">...</div>
    <div class="message">...</div>
    <div class="message">...</div>
    <div class="message">...</div>
    <div class="message">...</div>
  </div>
  <div class="page">
    ...
  </div>
 </div>
</div>

DIV の代わりに UL と LI を使用しても、動作はまったく同じであることに注意してください。

LoadMore ボタンのコード:

newScrollPosition = container.scrollTop()-firstPage.outerHeight();
container.scrollTop(newScrollPosition);   
innerContainer.append(newPage);
firstPage.remove();

すべてのメッセージが同じ高さの場合は問題なく動作しますが、メッセージの高さが異なる場合、ジャンプが見苦しくなります。

問題はリストの一番下でのみ発生することに注意してください。

firstPage を削除する次の方法を試しましたが、結果は常に同じです。

  • 表示:なし
  • jquery 削除
  • elem.parentNode.removeChild( elem )
  • 画面の左上と外側の絶対位置
4

2 に答える 2

1

jQuery.remove を試した場合は、slideUp を試しましたか?

私はしばらく前に同様の問題を抱えていましたが、ジャンプすると少なくとも停止し、スムーズにスライドします。

于 2013-08-05T14:00:33.227 に答える
1

私が思いついた最善の回避策は、ネイティブ スクロール {overflow-scrolling:touch} を iScroll 5 ライブラリに置き換えることです。問題なく iPad およびデスクトップ プラットフォームで動作します。

iScroll は CSS3 トランジションを使用して、ネイティブ スクロールを置き換えます。

例にリンクします。

次のコードを置き換えました

newScrollPosition = container.scrollTop() - firstPage.outerHeight(true);
container.scrollTop(newScrollPosition);

と

newScrollPosition = scroller.y + firstPage.outerHeight(true);
scroller.scrollTo(0, newScrollPosition);

DOM が変更されたときにスクローラーを更新することが重要です。

iScroll ライブラリへのリンク。

于 2013-08-08T11:49:48.323 に答える