使用无限滚动和历史 API

Question

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

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

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

P.S这跟推特的评论系统很像

Answer 1

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

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

您可以在您的状态中包含页面上的滚动位置，或被点击的评论的唯一标识符。然后在弹出状态时对元素使用 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

使用无限滚动和历史 API

Using Infinite scroll and History API

javascript

ajax

infinite-scroll