Javascript 如何在不跳页的情况下将HTML内容添加到当前位置上方

TL；DR:如何在当前查看的内容之前添加HTML内容，使页面不会跳转

详细解释：

我们必须以HTML呈现有时包含数百章的大型手册。手册可以是几MB，因此一次加载所有手册需要很长时间。我们可以根据需要加载章节

问题是HTML是响应性的，章节的长度不同。有些只有几句话，有些长达几页。这意味着我们不知道内容的高度。每当用户调整浏览器大小、更改方向或仅更改字体大小时，高度实际上都会更改

无法使用典型的惰性列表库，因为它们要求每个单元格具有固定的高度，而这里的情况并非如此

我们必须在DOM之外渲染一个章节，计算其高度并将其添加到容器diff中

每当窗口大小更改时，都必须重新计算所有大小

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

问题是，当用户向上滚动并将内容添加到当前位置上方时，页面会跳转，查看器会丢失

有没有一种方法可以在不必创建自定义滚动处理程序的情况下处理此问题

---

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

您需要的是一个无限滚动的表格，在这个表格中，滚动页面的表格单元格可以循环使用，并与不同的内容一起重复使用

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

这样做的内在好处是，您不再需要关注屏幕上每个章节的视觉添加、删除和定位（更糟糕的是，渲染它们——400个章节的文本将非常不稳定）。相反，您可以在一个位置管理数据，并将其显示在相同的重用可视元素中

棘手的部分是让表格单元格使用可变高度

图片来源和更多阅读：

---

另外，谷歌搜索更多的无限滚动教程

链接示例使用固定高度，而问题是关于动态行高度。因此，行高是未知的，直到你真正渲染它，使“跳转到”和向上滚动成为一项困难的任务，我完全意识到这一点，但stack overflow并不是一家免费制作软件的外包公司。OP现在可以对可变高度无限滚动表进行一些研究。React已经有了一个，例如：问题是，即使使用可变高度的无限滚动组件，在呈现容器之前，您也必须知道容器的高度。在页面上绘制之前，是否要预呈现页面并计算其尺寸？我甚至不知道你还能用今天的网络堆栈做什么。这就是为什么我花时间构建原生应用程序的原因。我对web的局限性已经了如指掌。你可以使用javascript网格：@Kiran No，页面必须保持响应。本期有CSSWG草案：