Qual a melhor forma de lembrar a posição da rolagem na página principal (categorias)?

Dev
1

Vejo que muitas páginas no Discourse lembram a posição da rolagem.
Mas a página de categorias sempre abre no topo. E quando se trata da página principal e há muitas categorias, isso não oferece a melhor experiência de usuário (UX).

Por exemplo, vi o commit FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub feito por @markvanlan.
Você sabe qual seria o caminho mais curto para fazer o mesmo na página de categorias?

Pelo que entendi desse tópico antigo:

a equipe de desenvolvimento prefere que a página de categorias sempre abra no topo, diferentemente das outras páginas.

Então, provavelmente, seria melhor encontrar uma maneira de implementar a correção da rolagem nas categorias como um componente de tema separado. Qual seria a melhor abordagem, na sua opinião?

Ou talvez alguém já tenha feito isso?

Obrigado!

2

Acredito que isso possa ser feito com um componente de tema. Não tenho certeza do seu nível técnico, mas posso fornecer um esboço básico de como isso pode ser realizado.

Usando a API onPageChange, você pode verificar se a página atual é a página de categorias. Se for, verifique o localStorage para obter a última posição de rolagem do usuário na página e role até essa posição, se ela existir. Nesse momento, adicione um ouvinte de eventos à janela para armazenar a posição de rolagem do usuário no localStorage. Na onPageChange, se o usuário não estiver na página de categorias, remova o ouvinte de eventos.

3

Obrigado @markvanlan - vou tentar.
Sou programador, mas tenho menos experiência com frontend.

Por favor, mantenha este tópico aberto por algum tempo - talvez haja alguém que já tenha feito isso.

4

Uma solução rápida e suja por enquanto – talvez ajude alguém mais tarde.

<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>