Как сделать бесконечный скрол без потери позиции?

Question

[Suleimanov_Ismar]

Здравствуйте,

Пожалуйста подскажите как сделать бесконечный скрол без потери позиции.
Например: есть пример реализации https://infinite-scroll.com/demo/full-page/

Но, это НЕ ТО ЧТО НАДО.

Необходимо:
1) Когда мы скролим появляется новый контент (статьи) - это сделано
2) Когда мы обновляем страницу - нужно чтобы все ранее подгруженные данные(статьи) сохранились
3) Когда мы переходим в конкретную статью потом обратно назад необходимо чтобы мы находились на том же месте где мы остановились ранее.

Пример реализации веб версия instagram

Подскажите пожалуйста, как это реализовать?

Answer 1

[Flying]

В первую очередь отказываться от любых переходов по страницам и реализовывать все как single page application. Всю навигацию делать самостоятельно используя history api. После этого появится много вопросов о том как оптимизировать работу с DOM и памятью, их придётся решать, а также появятся ещё более сложные вопросы о responsive поведении - их тоже придётся решать.

У instagram интересное решение, но оно сильно специфично и, думаю, подходит только для их контента.

Comments

[Suleimanov_Ismar]

хммм, то есть нужно чтобы контент сразу был на первой странице без перехода куда либо да?

[Flying]

Ваша задача сохранения позиции скролла сводится к тому чтобы сохранить layout страницы и её положение во viewport'е. Это можно сделать и без сохранения страницы, но за счёт наличия дополнительного времени на восстановление layout'а после перехода назад. Если это не SPA - то скорее всего это время будет включать в себя также перезагрузку страницы с сервера что визуально будет выглядеть задержкой. Это может быть приемлемо, но сильно зависит от условий задачи, а вы их не определили в своём вопросе.

Answer 2

[profesor08]

При прокрутке проверяй какие элементы из загруженного пула есть на экране и сохраняй эти данные где-то. При перезагрузке бери эти данные и загружай те самые элементы. Профит.