Was ist der beste Weg, sich die Scroll-Position auf der Hauptseite (Kategorien) zu merken?

Entwickler
1

Ich sehe, dass viele Seiten in Discourse die Scrollposition speichern. Die Kategorien-Seite öffnet sich jedoch jedes Mal oben. Und wenn es sich um die Hauptseite handelt und es viele Kategorien gibt, ist das nicht gerade benutzerfreundlich.

Zum Beispiel habe ich diesen Commit von @markvanlan gesehen: FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub. Wissen Sie, wie man das Gleiche für die Kategorien-Seite am einfachsten umsetzen kann?

Wie ich aus diesem alten Thema verstehe – Categories view does not keep vertical scroll position – bevorzugt das Entwicklerteam es, dass die Kategorien-Seite immer oben öffnet, anders als andere Seiten.

Daher wäre es wahrscheinlich besser, eine Lösung für das Scroll-Problem der Kategorien-Seite als separates Theme-Component zu implementieren. Was ist Ihrer Meinung nach der beste Ansatz?

Oder hat das vielleicht schon jemand umgesetzt?

Vielen Dank!

2

Ich glaube, das ließe sich mit einer Theme-Komponente umsetzen. Ich bin mir nicht sicher, wie technisch versiert Sie sind, aber ich kann Ihnen einen groben Überblick darüber geben, wie das umgesetzt werden könnte.

Mithilfe der onPageChange-API können Sie prüfen, ob sich die aktuelle Seite auf der Kategorien-Seite befindet. Falls ja, prüfen Sie localStorage auf die letzte Scrollposition des Benutzers auf dieser Seite und scrollen Sie dorthin, falls diese existiert. Fügen Sie zu diesem Zeitpunkt einen Event-Listener für das Fenster hinzu, um die Scrollposition des Benutzers in localStorage zu speichern. In onPageChange entfernen Sie den Event-Listener, wenn sich der Benutzer nicht auf der Kategorien-Seite befindet.

3

Danke @markvanlan – ich werde es versuchen.
Ich bin Programmierer, aber weniger erfahren im Frontend.

Bitte halte dieses Thema noch einige Zeit offen – vielleicht gibt es jemanden, der das bereits umgesetzt hat.

4

Eine schnelle und schmutzige Lösung für den Moment – vielleicht hilft sie später jemandem.

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