¿Cuál es la mejor manera de recordar la posición de desplazamiento en la página principal (categorías)?

Desarrollador
1

Veo que muchas páginas en Discourse recuerdan la posición del desplazamiento. Sin embargo, la página de categorías siempre se abre desde el principio. Y cuando se trata de la página principal con muchas categorías, esto no ofrece la mejor experiencia de usuario.

Por ejemplo, vi el commit de @markvanlan en FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub. ¿Sabes cuál es la forma más sencilla de hacer lo mismo para la página de categorías?

Según entiendo de este antiguo tema:

el equipo de desarrollo prefiere que la página de Categorías se abra desde el principio, a diferencia de otras páginas.

Por lo tanto, probablemente sea mejor encontrar una forma de implementar la corrección del desplazamiento de Categorías como un componente de tema independiente. ¿Cuál es el mejor enfoque en tu opinión?

¿O quizás alguien ya lo ha hecho?

¡Gracias!

2

Creo que esto podría hacerse con un componente de tema. No sé cuánto conocimiento técnico tienes, pero puedo darte un esquema básico de cómo lograrlo.

Usando la API onPageChange, podrías verificar si la página actual es la de categorías. De ser así, consulta localStorage para obtener la última posición de desplazamiento del usuario en la página y haz que el desplazamiento vaya a esa posición si existe. En ese momento, agrega un escucha de eventos a la ventana para guardar la posición de desplazamiento del usuario en localStorage. En onPageChange, si el usuario no está en la página de categorías, elimina el escucha de eventos.

3

Gracias @markvanlan, lo intentaré. Soy programador pero tengo menos experiencia en frontend.

Por favor, mantén este tema abierto por un tiempo; quizás haya alguien que ya lo haya hecho.

4

Una solución rápida y sucia por ahora, tal vez pueda ayudar a alguien más adelante.

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