Анимация scrollTop с использованием react-spring

Question

это должно быть просто, но я думаю, что мне не хватает чего-то важного в том, как работает Spring, документация не очень помогает.

У меня есть список динамических c, пользователь может добавлять элементы, когда это произойдет, я хочу использовать React Spring для анимации прокрутки до нижней части страницы (идентифицируемой currentBottomY переменной)

у меня есть что-то вроде этого

const mainRef = useRef<HTMLElement | null>(null)

const [y, setY] = useSpring({
    from: { y: mainRef?.current?.scrollTop || 0 },
    onFrame: props => {
       mainRef.current.scrollTop = props.y
    },
})

const onAddRow = () => {
    setY({ y: currentBottomY })
}

return (
    <animated.div ref={mainRef}>
        <List />
    </animated.div>
)

Я получение ошибок, говорящих, что я не могу определить там from и onFrame, но в документах говорится иначе, я действительно не могу понять это, какая-либо помощь?

Answer 1

Если вы хотите управлять обновлением при более позднем вызове (что похоже на то, что вы делаете), попробуйте передать useSpring перехватчик функции.

const [y, setY] = useSpring(() => ({
  from: { y: mainRef?.current?.scrollTop || 0 },
  onFrame: props => {
     mainRef.current.scrollTop = props.y
  },
}));

Answer 2

Благодаря указателю Мэтта я решил проблему и создал многоразовый хук, который принимает ссылку на контейнер и прокручивается вниз при вызове функции scrollToBottom().

import { useSpring } from 'react-spring'

const useScrollAnimation = (
  containerRef: React.MutableRefObject<HTMLDivElement | null>
): { animate: () => void } => {
  const [, setY] = useSpring(() => ({
    y: 0,
    onFrame: (props: any) => {
      props
    },
  }))

  const scrollToBottom = () => {
    setTimeout(() => {
      const current = containerRef?.current
      if (current) {
        const { scrollHeight } = current
        setY({
          config: { duration: 200 },
          y: scrollHeight - current.getBoundingClientRect().bottom,
          onFrame: (props: any) => (current.scrollTop = props.y),
        })
      }
    }, 0)
  }

  return { scrollToBottom }
}

export default useScrollAnimation