Веб-сайт Бесконечная прокрутка - вернуть позицию прокрутки после того, как пользователь "вернется" в браузере

Question

Довольно часто на страницах с бесконечной прокруткой вы можете столкнуться со сценарием:

• ты много прокручиваешь,
• затем вы нажимаете на какую-то ссылку из первоначального списка,
• вам не нравится то, что вы нажали
• так что ты возвращаешься
• Вы хотели бы продолжить прокрутку от точки, которую вы оставили.
• но все элементы, которые вы прокручивали, отсутствуют, и вам нужно прокручивать все, что вы уже видели снова.

Как вы справляетесь с этими ситуациями? Вы знаете какое-нибудь решение для этого? Есть ли способ сохранить состояние страницы или хотя бы узнать, что это была за ситуация и загрузить правильное количество бесконечного списка и прокрутить пользователя до последнего увиденного элемента.

Answer 1

При прокрутке, когда определенное условие выполняется, новое содержимое, добавляемое на страницу, должно быть каким-то образом загружено, например, вы вызываете какую-то страницу с помощью вызова ajax. Допустим, каждый раз, когда вы загружаете больше данных, вы загружаете десять элементов. Таким образом, текущим состоянием может быть количество загрузок еще 10 элементов. Вы можете сохранить эту информацию, например, используя якорь:

www.site.tld/index.php?id=999#load_counter=5

Другой возможностью было бы сохранить его с помощью файлов cookie. Вы можете попытаться в этот момент "сохранить" эти данные лучше всего. Например, после каждого вызова AJAX или когда вы покидаете страницу, используя onbeforeunload событие.

Когда ваша страница загружена, вы можете проверить, есть ли метаданные такого типа в файле cookie или в URL. Если есть, вы можете загрузить именно этот контент, отправив запрос AJAX, который загружает элементы списка, которые были загружены ранее. В моем примере это было бы

5 * 10

поскольку load_counter 5 и на каждую загрузку загружено еще 10 предметов. Вы также можете восстановить позицию. Либо сохраняя эту информацию о том, сколько пользователь прокручивал, либо просто угадывая, предполагая, что пользователь просматривал последнюю массу загруженных элементов. Например, вы можете прокрутить до элемента (5-1)*10, Это первый элемент последнего объема.

Answer 2

Это довольно неопределенный открытый вопрос, но позвольте мне поделиться некоторыми мыслями:

• Одна из причин, по которой страница, на которую вы возвращаетесь, перезагружается (и, следовательно, сбрасывается), заключается в том, что она запрещает кешированию браузера. Если страница, содержащая свиток, не обязательно должна иметь прагму: без кэширования и т. Д., Попробуйте без. Это может уже решить проблему, поскольку браузеру разрешено вернуться в последнее известное состояние.

• Если это не сработает или вам нужно убедиться, что у вас есть свежие данные при каждой загрузке страницы, то решение будет зависеть от вашего контента и вашей структуры. Возможно, вы можете сохранить серверную часть состояния в сеансе и соответствующим образом перестроить страницу, или вы можете установить cookie со ссылкой и позволить некоторому клиентскому сценарию опрашивать до этой точки при перезагрузке.

• Кроме этого, все, что я могу сказать, - это то, что большинство бесконечных рамок прокрутки просто говорят "ну, это проблема", точка. Тогда альтернативой может быть использование явной нумерации страниц.

Answer 3

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

scrollTop поддерживает положение вертикальной прокрутки, поэтому, если вы найдете способ запоминать scrollTop, вы всегда можете вернуться к тому же положению, которое вы оставили в последний раз.

      // get reference to your scrollable div
const element = document.getElementById("scrollableDiv");

// store element.scrollTop in local storage.
windows.localStorage.setItem('scrollTop', element.scrollTop);

// get scrollTop value once back to the previous page
const scrollTop = windows.localStorage.getItem('scrollTop')

// apply scrollTop to your scrollable div, to take scroll thumb to the exact position where it was left before
document.getElementById("scrollableDiv").scrollTop = scrollTop;