Qual è il modo migliore per ricordare la posizione dello scroll nella pagina principale (categorie)?

Sviluppatore
1

Vedo che molte pagine su Discourse ricordano la posizione dello scorrimento.
Ma la pagina delle categorie si apre sempre in alto. E nel caso in cui sia la pagina principale e ci siano molte categorie, questo non offre la migliore esperienza utente.

Ad esempio, ho visto il commit di @markvanlan in FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub.
Sapete qual è il modo più breve per fare lo stesso per la pagina delle categorie?

Da quanto ho capito in questo vecchio argomento:

il team di sviluppo preferisce che la pagina delle categorie si apra sempre in alto, diversamente dalle altre pagine.

Quindi probabilmente è meglio trovare un modo per implementare la correzione dello scorrimento per le categorie come componente di tema separato. Qual è, secondo voi, l’approccio migliore?

O forse qualcuno l’ha già fatto?

Grazie!

2

Credo che questo possa essere realizzato con un componente del tema. Non sono sicuro del tuo livello tecnico, ma posso fornirti una bozza di base su come potrebbe essere fatto.

Utilizzando l’API onPageChange, puoi verificare se la pagina corrente è quella delle categorie. In tal caso, controlla localStorage per l’ultima posizione di scorrimento dell’utente sulla pagina e scorri fino a quella posizione se esiste. A quel punto, aggiungi un listener per gli eventi alla finestra per memorizzare la posizione di scorrimento dell’utente in localStorage. In onPageChange, se l’utente non si trova sulla pagina delle categorie, rimuovi il listener per gli eventi.

3

Grazie @markvanlan - proverò.
Sono un programmatore ma ho meno esperienza nel frontend.

Per favore, mantieni aperto questo argomento per qualche tempo: magari c’è qualcuno che l’ha già fatto.

4

Una soluzione rapida e sporca per ora – forse potrebbe aiutare qualcuno in seguito.

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