使用无限滚动和历史API

Question

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

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

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

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

Answer 1

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

state对象 - state对象是一个JavaScript对象，它与pushState（）创建的新历史记录条目相关联。每当用户导航到新状态时，都会触发popstate事件，并且事件的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