javascript - 如何使用 react-spring 滚动到一个元素？

Question

我已经通读了整个 react-spring 文档，但似乎没有明确的方法可以做到这一点。

我的尝试:

import React, { useRef, useState } from "react"
import { animated, useSpring } from "react-spring"

const App = () => {
    const scrollDestinationRef = useRef()

    const [elementScroll, setElementScroll] = useState(false)

    const buttonClickHandler = () => setElementScroll(prevState => !prevState)

    const scrollAnimation = useSpring({
        scroll: elementScroll
            ? scrollDestinationRef.current.getBoundingClientRect().top
            : 0
    })

    return (
        <main>
            {/* Click to scroll to destination */}
            <animated.button
                onClick={buttonClickHandler}
                scrollTop={scrollAnimation.scroll}
                style={{
                    height: "1000px",
                    width: "100%",
                    backgroundColor: "tomato"
                }}
            >
                Scroll to destination
            </animated.button>

            {/* Scroll destination */}
            <div
                ref={scrollDestinationRef}
                style={{
                    height: "200px",
                    width: "200px",
                    backgroundColor: "green"
                }}
            ></div>
        </main>
    )
}

export default App

我正在尝试使用 ref 和 hooks。

useRef 附加到滚动目标，以便找到它从网站天花板偏移的顶部。

我使用 useState 在点击触发滚动的状态之间切换。

我使用 useSpring 来触发从 0 到滚动目标的滚动顶部的动画，也就是 getBoundingClientRect().top。

谁能帮忙解决这个问题？

网上没有太多解释，谢谢!

Answer 1

useSpring 返回一个函数来设置/更新动画值。您可以使用该函数为动画变量分配一个新值。然后，您可以使用 onFrame 属性来更新滚动位置。

像这样定义你的spring:

const [y, setY] = useSpring(() => ({
    immediate: false,
    y: 0,
    onFrame: props => {
      window.scroll(0, props.y);
    },
    config: config.slow,
  }));

然后使用setY函数启动spring，像这样:

 <button
        onClick={() => {
          setY({ y: scrollDestinationRef.current.getBoundingClientRect().top });
        }}
      >
        Click to scroll
 </button>

当您单击该按钮时，它会在您的 spring 中为 y 变量分配一个新值，并且每次更新时都会调用 onFrame 函数。

请注意，我们从 useSpring 中的 onFrame 属性调用了 window.scroll 函数。

查看工作演示 here .