Полоса прокрутки элемента прокрутки после прыжка вверх

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])

Но каждый раз, когда я нажимаю на ссылку внутри боковой панели и меняю страницу, полоса прокрутки навигации на секунду переходит вверх, а затем находит нужное место. Я ожидаю, что это будет go для новой позиции с последней позиции, не прыгая на вершину. Любую помощь я буду признателен.

Answer 1

Спасибо за ваши комментарии. Я на самом деле исправил свою проблему, поэтому я хочу объяснить, как я это сделал.

Как я уже говорил, я использую Gatsby, и у меня есть многоязыковой веб-сайт. Страницы, создаваемые динамически с помощью файлов .md. Гэтсби перерисовывает, когда компонент верхнего уровня изменяется между страницами. На самом деле, это сломало мои переходы на боковой панели, потому что он был размонтирован и смонтирован макет снова, когда я меняю страницу.

Гэтсби не автоматически оборачивает страницы в компоненте макета. Поэтому я обернул страницы макетом, используя gatsby-plugin-layout . Я сделал 2 разных макета. Один из них основной макет с боковой панелью и заголовком, другой для моих динамически создаваемых страниц. Я могу использовать один внутри другого. Теперь это не повторный рендеринг моего основного макета, это просто повторный рендеринг макета, который я создал для страниц внутри основного макета, полоса прокрутки не переходит наверх и переходы работают нормально.

Я не знаю, если я объяснил хорошо. Я надеюсь, что это помогает другим, у кого такая же проблема.