滚动元素滚动条在重新渲染后跳转到顶部。

Question

我使用Gatsby做了一个垂直的导航菜单。我在导航包装器中使用了useRef，并在菜单中的每个项目中使用了useRef来获得一些高度值，然后我计算了活动导航链接的滚动位置，如下图所示，并为导航包装器设置了scrollTop值，我可以将滚动条对齐活动链接。然后我计算了活动导航链接的滚动位置，如下图所示，并为导航包装器设置了scrollTop值，这样我就可以将滚动条对准活动链接项。

 function calculateScrollPosition(wrapper, link) {
    const distance = wrapper.current.scrollHeight - wrapper.current.offsetHeight
    const scrollUnit = wrapper.current.scrollHeight / distance
    const itemOffset =
      wrapper.current.scrollHeight / 2 < link.current.offsetTop
        ? link.current.offsetTop + link.current.clientHeight
        : link.current.offsetTop - link.current.clientHeight
    const position = Math.floor(itemOffset / scrollUnit)
    wrapper.current.scrollTop = position
  }

我在这里调用它

  useEffect(() => {
    if (activeLink) {
      calculateScrollPosition(list, activeLink)
    }
  }, [activeLink])

但是每次我点击侧边栏里面的链接，换页面的时候，导航的滚动条都会跳到顶部一秒钟，然后找到正确的位置。我希望它去新的位置从最后的位置，而不是跳到顶部。任何帮助我将感激不尽。

Answer 1

谢谢你的意见。实际上我已经解决了我的问题，所以我想解释一下我是怎么做的。

正如我提到的，我使用Gatsby和我有多语言的网站。页面用.md文件动态创建。当页面之间的顶层组件发生变化时，Gatsby会重新渲染。事实上，这也破坏了我的侧栏过渡，因为当我改变页面时，它是unmount and mount layout again。

Gatsby不会自动用layout组件包装页面。所以我使用 gatsby-plugin-layout. 我做了2个不同的布局。其中一个是带有侧栏和页眉的主布局，另一个是我动态创建的页面。我可以在另一个布局中使用其中一个布局。现在它不是重新渲染我的主布局，只是重新渲染我为主布局内的页面创建的布局，滚动条不跳到顶部，过渡也很好。

我不知道我是否解释清楚了。希望能帮助其他有同样问题的人。