javascript - 在 Next js / React 中保存和恢复窗口 y 位置

问题描述

我正在使用带有浅层和替换属性的nextjs链接/author来将 url 从检测到/author?book=234523452查询时更改为页面有条件地隐藏 InfiniteScroll 组件并改为显示带有一本书的组件。单书组件有一个“X”可以返回（也包含在链接中），以便再次显示 InfiniteScrollComponent。

我想要做的是将当前窗口 Y 保存在查询中（单本书），当单击“X”时，通过 useState 移动到该存储位置。

我想提一下，不幸的是scroll={false}不适用于我的情况。

这是我的页面相关代码：

const [scrollPos, setScrollPos] = useState()

const readUrl = (url, bool) => {
  if (url){
    setScrollPos(window.pageYOffset || document.documentElement.scrollTop)
    setUrlNow(url)
  }else{
    router.events.on('routeChangeComplete', () => {
      if (typeof window !== "undefined") {
        //setTimeout(function(){
          window.scrollTo(0,scrollPos)
        //},200)
      }
    })
  }
  setToggle(bool)
  
  return
}

if (url)意味着它是从/author（所以使用 InfiniteScroll 组件）路由到/author?book=234523452（使用单本书），else意味着“X”基本上被点击了，所以路由回/author

setTimeout(function()似乎在大多数情况下都有效，但并非总是如此，并且还为其添加了丑陋的移动效果

标签： javascriptreactjsscrollreact-routernext.js

javascript - 在 Next js / React 中保存和恢复窗口 y 位置

问题描述

解决方案

推荐阅读