时间戳

首页 > 解决方案 > 通过历史推送/替换状态恢复滚动位置

reactjs - 通过历史推送/替换状态恢复滚动位置

问题描述

我有一个列表，我可以在其中访问我的列表项的详细视图。在我的详细视图中，我可以在我的列表项之间导航。

我想在详细视图上有一个后退按钮，无论我在详细视图中导航的频率如何，它都能将我带到我的列表视图。

目前我试过这个：我将一个 url: 字符串传递给我的导航组件。这就是我列表的网址。

然后我想在单击后退按钮时更改我的状态：

 const onClickBack = () => {
        const stateData = {
            path: window.location.href,
            scrollTop: 300
        }
        window.history.replaceState(stateData, "", backURL)


        const stateData2 = {
            path: window.location.href,
            scrollTop: 300
        }

        window.history.pushState(stateData2, "", backURL)

        window.history.back()
    }

我从历史 pushState 和滚动位置复制了这段代码

无论我多久浏览一次，我现在都可以返回我的列表。但我怎样才能恢复整个状态，例如滚动位置？

我必须传递整个状态对象吗？

标签： reactjsroutingnavigationhistory

解决方案

您似乎想手动恢复滚动位置。如果是这种情况，那么您应该告诉历史 API 您的意图。

if ('scrollRestoration' in history) {
  // Back off, browser, I got this...
  history.scrollRestoration = 'manual';
}

这样，前一个 URL 的滚动位置也将保持不变。

文档：https ://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

推荐阅读