Question

我在自己的网站上使用Infinite Scroll。我在使用无限供稿的每个帖子上都有评论供稿。当某人单击其中一条评论时，评论的回复应加载。当某人单击评论的答复之一时，将显示该答复。默认情况下，对评论的回复没有回复。每个视图都会显示帖子以及父评论。因此，我将有3个视图：

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

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

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

Answer 1

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

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

使用无限滚动和历史记录API

1 个答案: