使用 react-spring 动画 scrollTop

Question

这应该很简单，但我想我遗漏了一些关于 Spring 工作原理的重要信息，文档帮助不大。

我有一个动态列表，用户可以添加元素，当发生这种情况时，我想使用 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 hook 函数。

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

Answer 2

感谢 Matt 的指点，我解决了这个问题并创建了一个可重用的钩子，它接受容器的 ref 并在调用 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

使用 react-spring 动画 scrollTop

Animating scrollTop using react-spring

javascript

reactjs

react-spring