メイン（カテゴリ）ページでスクロール位置を記憶する最良の方法は何ですか？

開発
1

Discourse の多くのページはスクロール位置を記憶しているようですが、カテゴリページは毎回一番上から開きます。特にメインページでカテゴリ数が非常に多い場合、これは UX として最適とは言えません。

例えば、@markvanlan による FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub のコミットをご覧になったことがあるかもしれません。カテゴリページでも同様の動作を実現する最も簡単な方法は何かご存知でしょうか？

この古いトピックから推測すると https://meta.discourse.org/t/categories-view-does-not-keep-vertical-scroll-position/48702、開発チームは他のページとは異なり、カテゴリページは常に一番上から開くようにすることを好んでいるようです。

そのため、カテゴリのスクロール修正を個別のテーマコンポーネントとして実装する方策を見つけるのがよいかもしれません。皆様のご意見では、最適なアプローチは何でしょうか？

あるいは、すでに実現されている方がいらっしゃるでしょうか？

ありがとうございます！

2

これはテーマコンポーネントで実現できると思います。あなたの技術レベルはわかりませんが、実現方法の基本的な概要を説明できます。

onPageChange API を使用して、現在のページがカテゴリページかどうかを確認します。もしそうであれば、localStorage をチェックして、ユーザーのページ内の最後のスクロール位置を取得し、その位置が存在する場合はその位置までスクロールします。その後、window にイベントリスナーを追加して、ユーザーのスクロール位置を localStorage に保存するようにします。onPageChange で、ユーザーがカテゴリページにいない場合は、イベントリスナーを削除します。

3

@markvanlan さん、ありがとうございます。試してみます。
私はプログラマーですが、フロントエンドの経験は浅いです。

このトピックはしばらく開けておいてください。すでにこれを行った方がいるかもしれません。

4

とりあえずの簡易的な解決策です。後で誰かの役に立つかもしれません。

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