Question

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

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

目前，我尝试了以下方法：我将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()
    }

我从history pushState and scroll position

复制了此代码

无论我导航的频率如何，现在我都可以返回列表。但是我如何恢复整个状态，例如滚动位置？

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

Answer 1

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

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

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

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

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

1 个答案: