如何在没有页面跳转的情况下在当前位置上方添加HTML内容

Question

TL; DR：如何在当前查看的内容之前添加HTML内容，以便页面不会跳转？

更长的解释：

我们必须在HTML中呈现大量手册，有时会有数百章。手册可以是几MB，因此一次加载所需的时间会很长。我们可以按需加载章节。

问题是HTML是响应式的，章节有不同的长度。有些只有几句话，有些是几页长。这意味着我们不知道内容的高度。只要用户调整浏览器大小，更改方向或只是字体大小，高度确实会发生变化。

不能使用典型的惰性列表库，因为它们需要每个单元格的固定高度，而不是这里的情况。

我们必须在DOM之外渲染一个章节，计算它的高度并将其添加到容器差异。

每当窗口大小发生变化时，都必须重新计算所有大小。

天真的方法是在本章前后加载几章。然后每隔一秒左右轮询滚动位置，检查是否需要加载更多章节。

问题在于，当用户向上滚动并且内容被添加到当前位置之上时，页面会跳转并且观看者会丢失。

有没有办法处理这个问题而无需创建自定义滚动处理程序？

这甚至是一件事吗？或者现代浏览器可以轻松处理5000页HTML文档吗？

Answer 1

你想要的是一个无限滚动的表格，其中滚动页面的表格单元格被回收并重复使用不同的内容。

使用模型 - 视图方法（或类似模型），您可以对延迟加载来自数据源的数据的可重用单元进行排队和出列（例如，在本例中为章节）。

这样做的固有好处是，您不再需要关注屏幕上每个章节的视觉添加，删除和定位（更糟糕的是，渲染它们 - 400个章节的文本真的会是真的断断续续）。相反，您可以在一个地方管理您的数据，并在相同的，重复使用的可视元素中呈现。

棘手的部分是使表格单元格以可变高度工作。

图片来源和更多阅读：http://hrily.co/blog/2017/05/20/rendering-large-html-tables.html Google还提供更多无限滚动教程。