Использование бесконечной прокрутки и истории API - PullRequest
Новая
       12

Использование бесконечной прокрутки и истории API

0 голосов
/ 24 марта 2019

Я использую Бесконечный свиток на моем сайте.У меня есть лента комментариев к каждому сообщению, которое использует бесконечный канал.Когда кто-то нажимает на один из комментариев, ответы на комментарии должны загружаться.Когда кто-то нажимает на один из ответов на комментарий, этот ответ будет отображаться.По умолчанию ответы на комментарии не имеют ответов.Каждое представление будет иметь сообщение, отображаемое вместе с комментарием родителей.Итак, у меня будет 3 вида: 

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

Обычно это очень просто создать, однако я хотел бы создать все это с помощью History API.Так, например, если пользователь попадает в первое представление, он нажимает на комментарий, второе представление должно быть загружено с использованием PushState, а новый фид ответов должен быть загружен с использованием Ajax.Вот где я запутался.Как канал может сохранить свое место, если пользователь нажимает кнопку «Назад».Так, например, если они ответили и ответили, им будет показано то же место, что и в ленте комментариев.Есть ли более простой способ сделать это.

PS Это очень похоже на систему комментариев Twitter.

1 Ответ

1 голос
/ 24 марта 2019

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

объект состояния - объект состояния - это объект JavaScript, связанный с новой записью истории, созданной pushState (). Всякий раз, когда пользователь переходит в новое состояние, запускается событие popstate, а свойство состояния события содержит копию объекта состояния записи истории.

Вы можете включить в свое состояние позицию прокрутки на странице или уникальный идентификатор комментария, по которому щелкнули. Затем используйте scrollIntoView для элемента, когда вы открываете состояние.

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

EDIT:

Чтобы включить текущую позицию в текущее состояние перед открытием комментария, используйте replaceState, чтобы добавить текущую позицию в состояние перед нажатием нового состояния. https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method

...