在 Next.js 中有没有办法确定是否使用了 scrollRestoration，甚至是否使用了后退按钮？

Question

我正在使用 Next.js 的 scrollRestoration 功能在按下后退按钮时恢复页面位置。问题在于，它不会恢复该页面上轮播的水平滚动位置。所以我创建了自己的会话变量来跟踪每个轮播的位置并在页面加载时恢复它们。问题是，如果按下 back/forward 按钮，我只想恢复这些滚动位置。如果有一个指示器表明在页面上使用了 scrollRestoration 我可以使用它，否则，如果有一个指示器表明该页面是使用 forward/back 按钮访问的，这也可以解决它。

有什么想法吗？

Answer 1

从来没有这样做过，但我的直觉是：

制作一个包装器组件，在您的组件中公开 next/router
设置 useEffect 在 router.pathName 变化时更新
在观看的效果中设置条件History.back()

那种绕过框架，但它看起来不像 Next 暴露了您正在寻找的东西。

Answer 2

我已经弄清楚如何确定是否为页面设置了 scrollRestoration。

React.useEffect(() => {
    const hasScrollHistory = sessionStorage.getItem(`__next_scroll_${window.history.state.idx}`);
    if (hasScrollHistory) {
        // do your restore logic here
    }
}, []);

在 Next.js 中有没有办法确定是否使用了 scrollRestoration，甚至是否使用了后退按钮？

In Next.js is there a way to determine if if scrollRestoration was used, or even if the back button was used?

javascript

routes

next.js