Как сделать бесконечный скролл вверх?

Question

[Константин]

Всем привет, не смог найти решения. Но возможно не верно гуглю.

Задача казалось бы простая. На сайте есть каталог товаров
Вместо постраничной навигации используется infinity-scroll
Все отлично даже пагинация в адресной строке есть.

Вводна: пользователь А копирует из адресной строки ссылку и делится ей с другим пользователем B.
...../catalog/page3

Пользователь B переходит по ссылке и видит список товаров. Но в какой то момент решает что ему нужно попасть на
...../catalog/page2 или ...../catalog/page1 проскролив вверх

Как это реализовать грамотно ?
Есть отличный плагин https://infinite-scroll.com но он не умеет так делать.

Вот пример https://infinite-scroll.com/demo/full-page/

Если скролить с первой страници то назад можно вернуться, а вот если я по прямой ссылке отктрою
https://infinite-scroll.com/demo/full-page/page3 то вот вверх листнуть в начало не получиться.

Comments

[Сергей Сергей]

Известный мне пример, как понял вопрос я.
https://owen.ru/product/trm148/question

Здесь сверху резервируется место, чтобы скрипт смог отследить прокрутку вверх. Дальше просто подгрузка недостающих частей.

Answer 1

[Михаил]

Недавно искал и тоже не нашел готовый плагин, пришлось писать самому. Код сейчас недоступен, алгоритм следующий:
1. Размещаем сверху списка элемент
2. Создаём IntersectionObserver с этим элементом
3. Когда срабатывает callback на появление элемента в зоне видимости запоминаем положение скролла относительно низа страницы и запускаем загрузку данных, а по окончании загрузки рендерим данные на страницу и ставим скролл на значение, которое запоминали ранее.

Ну ещё лоадер можно отрисовать, когда идёт загрузка данных и выставлять флаг, чтобы при повторном появлении не запускалась ещё одна загрузка данных и т.д. по вкусу