从 iPad 上的列表中卸载页面时，如何防止 mobile-safari 跳转？

Posted 2023-03-12

【中文标题】从 iPad 上的列表中卸载页面时，如何防止 mobile-safari 跳转？

【英文标题】：How to prevent mobile-safari from jumping when unloading pages from a list on iPad?

【发布时间】：2013-07-30 11:28:54

【问题描述】：

我正在使用带有 Retina 的 iPad 上的 html5 开发一个无限列表。这个想法是渲染两个页面，然后删除第一页并将下一个附加到列表的底部。它在 Desktop Safari 和 Chrome 上运行良好，但在 iPad 上却不行。

示例中有两个页面。所有消息都是相同的 120 像素高度，但第一个高度为 300 像素。要重现问题，请滚动到最底部并按下 LoadMore 按钮，您应该注意到它会向上跳，然后跳到正确的位置。滚动和删除之间似乎有一点延迟。现在所有消息都是相同的 120 像素高度，如果您在底部滚动并再次单击按钮，则不会有任何跳跃，并且会按预期运行。按重启按钮重新开始。

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 删除 elem.parentNode.removeChild(elem) 屏幕顶部和左侧的绝对位置

【参考方案1】：

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

前段时间我也遇到过类似的问题，如果不跳跃，它至少会停止，然后它会平稳滑动。

【讨论】：

感谢 Giles 的回复，但我们的想法是在删除第一个项目后保持列表的位置以模拟无限滚动。如果我添加滑动，它会破坏滚动体验。

【参考方案2】：

我想出的最佳解决方法是将原生滚动 overflow-scrolling:touch 替换为 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.