Quelle est la meilleure façon de se souvenir de la position de défilement sur la page principale (catégories) ?

Dev
1

Je remarque que de nombreuses pages sur Discourse mémorisent la position du défilement. Cependant, la page des catégories s’ouvre toujours en haut. Dans le cas où il s’agit de la page principale et qu’il y a de nombreuses catégories, cela ne constitue pas la meilleure expérience utilisateur.

Par exemple, j’ai vu le commit FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub par @markvanlan. Savez-vous quelle est la méthode la plus simple pour faire de même avec la page des catégories ?

D’après ce vieux sujet :

l’équipe de développement préfère que la page des catégories s’ouvre en haut, contrairement aux autres pages.

Il serait donc probablement préférable de trouver un moyen d’implémenter la correction du défilement des catégories sous forme de composant de thème séparé. Quelle serait selon vous la meilleure approche ?

Ou peut-être que quelqu’un l’a déjà fait ?

Merci !

2

Je pense que cela pourrait être réalisé avec un composant de thème. Je ne sais pas à quel point vous êtes technique, mais je peux vous donner un aperçu de base de la manière dont cela pourrait être accompli.

En utilisant l’API onPageChange, vous pourriez vérifier si la page actuelle est la page des catégories. Si c’est le cas, vérifiez localStorage pour obtenir la dernière position de défilement de l’utilisateur sur la page, et défilez à cette position si elle existe. À ce stade, ajoutez un écouteur d’événement à la fenêtre pour enregistrer la position de défilement de l’utilisateur dans localStorage. Dans onPageChange, si l’utilisateur n’est pas sur la page des catégories, supprimez l’écouteur d’événement.

3

Merci @markvanlan, je vais essayer.
Je suis développeur, mais moins expérimenté en frontend.

Gardez ce sujet ouvert pendant un certain temps – peut-être que quelqu’un a déjà fait cela.

4

Une solution rapide et sale pour l’instant – peut-être que cela aidera quelqu’un plus tard.

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