reactjs - 如何在无限滚动页面上保留/恢复滚动位置？

Question

我的 nextjs 应用程序中有一个无限滚动页面，单击浏览器后退按钮时我无法恢复滚动位置。

我正在获取 getServersideProps 中的数据

export const getServerSideProps = async () => {
  const res = await fetch('/api');
  const data = await res.json();
  return { props : { data} }
}

我有一个用于滚动分页的钩子

    const { useState, useEffect } = require("react");

const useInifiniteScroll = (callback) => {
    const [ isFetching,setIsFetching ] = useState(false);
    useEffect(() => {
        window.addEventListener('scroll' , handleScroll);
        return () => window.removeEventListener('scroll',handleScroll);
    },[])
    useEffect(() => {
        if(!isFetching) return;
        callback(() => {
            console.log('called back')
        })
    },[isFetching])
    function handleScroll() {
        if(window.innerHeight + document.documentElement.scrollTop ===
            document.documentElement.offsetHeight / 2 || isFetching) return;
        setIsFetching(true)
    }
    return [ isFetching, setIsFetching ];
}

export default useInifiniteScroll;

我有一个 useEffect 方法来获取 api 的其余部分。我会将两个 api 合并到一个公共状态变量中。

所以在这里如果我导航到下一条路线，我怎样才能恢复以前的滚动位置？

标签： reactjsnext.js