Html：是否可以使用 Javascript 使用静态 html 进行无限（有限？）滚动？答案

【问题标题】：Html: Is it possible to have infinite (finite?) scrolling with a static html using Javascript?Html：是否可以使用 Javascript 使用静态 html 进行无限（有限？）滚动？
【发布时间】：2013-01-16 23:30:38
【问题描述】：

我有自动生成并保存在 S3 中的静态 html 文件。有时文件达到 2mb 大小。是否可以使用 javascript 获取 html 文件的一部分，显示它，当用户到达页面底部时，获取下一部分等等？

【问题讨论】：

是的，看看 Twitter！尽管您需要在服务器上使用端点来提供要加载的数据
@Alex，最好的办法是将大文件存储在较小的文件中，然后在向下滚动时让 JS 获取每个文件。
@cowls：谢谢。是的，我知道可以使用服务器进行无限滚动，但我只使用静态文件。
另一个很好的例子是 WordPress。一旦你有 10 篇左右的博客文章，你创建的下一篇文章就会进入一个新的“页面”。当您滚动到页面底部时，它会获取接下来的 10 个帖子。类似于@sachleen 的建议。
您可能会创建仅代表部分文档的静态 json 文件，然后通过 AJAX 调用加载它们

标签： javascript jquery html static

【解决方案1】：

XHR Object 提供了一种设置自定义 HTTP 标头的方法。因此，您可以尝试设置 Range header 以仅获取静态文件的一部分。

您必须考虑到该块不是正确的 HTML，因为您正在剪切文件的任意部分，因此如果您打算显示结果，则必须实现逻辑以正确处理结果。

我很乐意看到您以这种方式实现它，而不是像往常那样利用分块到服务器。

【讨论】：

【解决方案2】：

这是完全可能的 - 想法是您可以在服务器上预渲染“片段”，其中每个片段代表 N 篇文章的“子页面”或您拥有的内容。然后，您使用 0（或 1）个片段呈现页面，并将其发送到客户端。当客户端滚动到底部时，您只需请求下一个片段（使用 AJAX）并将其附加到前一个片段的末尾。无限期地继续这样做。

要理解的关键点是每个片段都是在服务器上静态渲染的。尽管片段本身可能不是一个完整的 HTML 页面，但它们可以“无限附加”到现有页面中。 HTTP（相对于完整的 HTML）的部分乐趣在于，您不必拥有完整的 HTML 页面即可成功提供任何片段。您可以将 HTML 视为“样板”，它围绕着任意块额外的、非格式良好的 HTML（当放置在您的样板中时格式正确）。

由于 AJAX 基于 HTTP 请求，因此您可以请求任意内容。哎呀，您可以要求自己的自定义标记，只要“捕获”响应的 Javascript 可以以浏览器可以理解的方式格式化它 - 即 HTML、CSS 和 JavaScript。

【讨论】：

【解决方案3】：

问题不在于如何进行无限滚动，而在于如何一次加载大文件的部分内容，并在用户向下滚动时加载更多内容。我不确定这是否可能，所以这是另一个解决方案：

将大文件存储在较小的块中，比如说1.txt, 2.txt ... 然后，在您的页面上，当您向下滚动时，您可以加载下一个N.txt。（顺便说一句，不一定是txt）。只需确保您的包装器（用户实际看到的文件）具有完整的 HTML，并且它正在加载的块只是内容。这意味着块不应该像 </body></html>... 那样应该在包装文件中。

这里是how to fetch a file using AJAX 或使用jQuery。您真正需要做的就是跟踪您所在的部分，以便加载下一个部分。如果它不存在，那么您已经加载了整个文件。

【讨论】：