时间戳

首页 > 解决方案 > 重新渲染后滚动元素滚动条跳到顶部

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

问题描述

我正在使用 Gatsby，并制作了一个垂直侧导航菜单。我使用 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])

但是每次我单击侧边栏中的链接并更改页面时，导航滚动条都会跳到顶部一秒钟，然后找到正确的位置。我希望它从最后一个位置转到新位置，而不是跳到顶部。我将不胜感激任何帮助。

标签： javascriptreactjsscrollgatsby

解决方案

谢谢您的意见。我实际上解决了我的问题，所以我想解释一下我是如何做到的。

正如我所提到的，我正在使用 Gatsby，并且我有多语言网站。使用 .md 文件动态创建的页面。当顶级组件在页面之间发生变化时，Gatsby 会重新渲染。实际上，这也破坏了我的侧边栏转换，因为当我更改页面时它再次卸载和安装布局。

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

不知道我解释的好不好。我希望它可以帮助其他有同样问题的人。

推荐阅读