如何防止移動Safari瀏覽器從iPad上的列表中卸載頁面時跳躍？

我正在iPad上開發使用HTML5的無限列表和Retina。這個想法是渲染兩頁，然後刪除第一頁，並將下一頁附加到列表的底部。它在Desktop Safari和Chrome上運行良好，但不在iPad上運行。如何防止移動Safari瀏覽器從iPad上的列表中卸載頁面時跳躍？

該示例中有兩個頁面。所有的消息都是相同的120px高度，但是第一個300px高度的消息。要重現問題，請滾動到最底部並按下LoadMore按鈕，您應該注意到它跳起來然後到達正確的位置。看起來滾動和刪除之間有一點點延遲。現在所有消息的高度都是120px，如果您在底部滾動並再次單擊按鈕，則不會有任何跳躍，並且其行爲與預期相同。按重啓按鈕重新開始。

Link to the example.

佈局：

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

請注意的行爲是完全一樣的，如果我使用UL和LIS，而不是資料覈實。

LoadMore按鈕的代碼：

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

當所有的消息都是一樣的高度它工作正常，但是當任何消息有不同的高度，使其跳躍難看。

只要記住，問題只發生在列表的最底部。

我試圖消除FIRSTPAGE以下方法，但結果總是相同的：

顯示：無
jQuery的刪除
elem.parentNode.removeChild（ELEM）
屏幕頂部和左側的絕對位置

來源

2013-07-30 Andrey

我想出的最佳解決方法是用iScroll 5庫替換原生滾動{溢出滾動：觸摸}。它適用於iPad和桌面平臺，沒有問題。

iScroll使用CSS3轉換替換原生滾動。

Link to the example.

我把它換成下面的代碼

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

與

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

重要的是，當DOM改變刷新滾動條。

Link to iScroll library.

來源

2013-08-08 11:49:48 Andrey

如果您試過jQuery.remove，您嘗試過slideUp嗎？

我曾經有過類似的問題，而且它至少停止了跳躍，然後它只是順利滑動。

來源

2013-08-05 14:00:33

謝謝賈爾斯的反應，但這個想法是保留這個列表的位置的除去第一項效仿無限滾動之後。如果我添加滑動它將打破滾動體驗。 – Andrey

如何防止移動Safari瀏覽器從iPad上的列表中卸載頁面時跳躍？

回答

相關問題