使用无限滚动和历史 API答案

【问题标题】：Using Infinite scroll and History API使用无限滚动和历史 API
【发布时间】：2019-03-23 21:33:21
【问题描述】：

我在我的网站上使用Infinite Scroll。我在每个使用无限提要的帖子上都有一个 cmets 提要。当有人点击其中一个 cmets 时，应该会加载评论的回复。当有人点击评论的回复之一时，就会显示该回复。默认情况下，对 cmets 的回复没有回复。每个视图都会显示帖子以及父评论。所以我会有 3 个视图：

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

这很容易正常创建，但是，我想使用 History API 创建所有这些。例如，如果用户登陆第一个视图，然后他们单击评论，则应使用 PushState 加载第二个视图，并应使用 Ajax 加载新的回复提要。这就是我感到困惑的地方。如果用户单击后退按钮，提要如何保留其位置。因此，例如，如果他们正在回复并且他们回击，那么他们将被显示在他们在 cmets 提要中的相同位置。有没有更简单的方法。

P.S 这与 Twitter 的评论系统非常相似。

【问题讨论】：

标签： javascript ajax infinite-scroll

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

state 对象 — 状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史条目相关联。每当用户导航到新状态时，都会触发一个 popstate 事件，并且该事件的 state 属性包含历史条目的 state 对象的副本。

您可以在您的状态中包含页面上的滚动位置，或被点击评论的唯一标识符。然后在弹出状态时使用 scrollIntoView 作为元素。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

编辑：

要在打开评论之前将当前位置包含在当前状态中，请使用replaceState 将当前位置添加到状态中，然后再推送新状态。 https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method

【讨论】：

是的，但 state 对象是针对我要进入的评论的。如果我回去，那么状态对象在技术上将是未知的。所以如果我回去，我仍然会失去我在提要中的位置。
是的。在这种情况下，您可以在推送新状态之前使用replaceState。 developer.mozilla.org/en-US/docs/Web/API/…我已经编辑了我的答案。
这是个好主意。您是否认为只是复制 cmets 容器，清空它，然后隐藏原始 cmets 容器而不是这样做更好？所以新的容器会保存对被点击评论的回复，旧的容器仍然会保存所有的 cmets，但会被隐藏。然后当用户点击返回时，用户在哪里会在状态对象中？
我认为复制 cmets 容器可能有点矫枉过正。我认为创建特定父注释的副本，使用与在另一个视图中渲染 cmets 相同的渲染代码就足够了。