Question

我正在iPad上使用带有Retina的HTML5开发无限列表。我们的想法是渲染两个页面然后删除第一页并将下一个页面附加到列表的底部。它适用于Desktop Safari和Chrome，但不适用于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和LI而不是DIV，行为完全相同。

LoadMore按钮的代码：

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

当所有消息的高度相同时，它工作正常，但当任何消息的高度不同时，它会跳得很难看。

请记住，问题仅发生在列表的最底部。

我尝试了以下删除firstPage的方法，但结果总是一样的：

显示：无
jquery remove
elem.parentNode.removeChild（elem）
屏幕顶部和左侧的绝对位置

Answer 1

如果您尝试过jQuery.remove，您是否尝试过slideUp？

我曾经有过类似的问题，如果从跳跃开始，它至少会停止，然后它就会顺利滑动。

Answer 2

我提出的最佳解决方法是用iScroll 5库替换本地滚动{overflow-scrolling：touch}。它适用于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.

从iPad上的列表中卸载页面时如何防止移动游戏跳转？

2 个答案: