Какой лучший способ запомнить позицию прокрутки на главной (категории) странице?

Разработка
1

Я заметил, что многие страницы в Discourse запоминают позицию прокрутки. Однако страница категорий каждый раз открывается сверху. И если это главная страница, где много категорий, это создаёт не самое лучшее пользовательское впечатление.

Например, я видел коммит от @markvanlan: FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub.
Подскажите, пожалуйста, какой самый короткий способ сделать то же самое для страницы категорий?

Насколько я понял из этой старой темы — Categories view does not keep vertical scroll position — команда разработчиков предпочитает, чтобы страница категорий всегда открывалась сверху, в отличие от других страниц.

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

Или, может быть, кто-то уже это сделал?

Спасибо!

2

Я полагаю, это можно реализовать с помощью компонента темы. Не знаю, насколько вы технически подкованы, но могу набросать базовый план действий.

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

3

Спасибо @markvanlan — я попробую.
Я программист, но с меньшим опытом во фронтенде.

Пожалуйста, оставьте эту тему открытой на некоторое время — возможно, кто-то уже это делал.

4

Быстрое и неидеальное решение на данный момент — возможно, оно кому-нибудь пригодится позже.

<script type="text/discourse-plugin" version="0.8">

api.onPageChange((url) => {
    window.removeEventListener("scroll", saveScroll, {passive: true});
    
    if (url === "/" || url === "/categories"){
        restoreScroll();
        window.addEventListener("scroll", saveScroll, {passive: true});
    }
});


function restoreScroll() {
    var pos = sessionStorage.getItem("categoriesScrollPosition");
    if (pos != 0) {
        window.scrollTo(0, pos);
    } 
}

function saveScroll() {
    if (window.scrollY != 0) {
        sessionStorage.setItem("categoriesScrollPosition", window.scrollY + 1);
    }
}
</script>