Question

我正在使用盖茨比，并且做了一个垂直侧面导航菜单。我使用useRef进行导航包装，并使用菜单中的每个项目获取一些高度值。然后，我计算了活动导航链接的滚动位置，如下图所示，并设置了导航包装的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重新渲染。实际上，这也打破了我的侧边栏转换，因为在我更改页面时再次卸载并重新安装了布局。

Gatsby不会自动将页面包装在布局组件中。因此，我使用gatsby-plugin-layout包装了具有布局的页面。我做了2种不同的布局。其中一种主要布局带有侧边栏和标题，另一种用于我动态创建的页面。我可以在另一个里面使用。现在，它不会重新渲染我的主布局，它只是我为主布局内的页面创建的重新渲染布局，滚动条不会跳到顶部并且过渡效果很好。

我不知道我的解释是否正确。希望对其他有相同问题的人有所帮助。

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

1 个答案: