如何最好地记住主页（类别）的滚动位置？

开发
1

我看到许多 Discourse 页面会记住滚动位置。但分类页面每次打开时都会回到顶部。如果这是主页且存在大量分类，这会带来较差的用户体验。

例如，我看到了 @markvanlan 提交的这个 commit：https://github.com/discourse/discourse/pull/8212。您知道实现分类页面相同功能的最短路径是什么吗？

根据这个旧主题的理解：https://meta.discourse.org/t/categories-view-does-not-keep-vertical-scroll-position/48702，开发团队倾向于让分类页面始终从顶部打开，与其他页面不同。

因此，或许最好将分类页面的滚动修复作为一个独立的主题组件来实现。您认为最佳方案是什么？

或者是否已经有人实现了类似功能？

谢谢！

2

我认为这可以通过主题组件实现。我不确定您的技术背景如何，但我可以提供一个基本实现思路。

使用 onPageChange API，您可以检查当前页面是否为分类页面。如果是，则检查 localStorage 中用户上次在该页面的滚动位置，如果存在则滚动到该位置。此时，向窗口添加一个事件监听器，将用户的滚动位置保存到 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>