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

Question

我已经通读了整个

文档，而且似乎没有一个明确的方法来做到这一点。

我的尝试是：

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 (
        
            {/* Click to scroll to destination */}
            
                Scroll to destination
            

            {/* Scroll destination */}
            
        
    )
}

export default App

我使用了一个裁判和钩子来完成我的尝试。

The The The

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

我使用

若要在状态之间切换，请单击以触发滚动。

我使用

以触发从0到滚动目标的滚动顶部的动画。

..。

有人能帮助解决这个问题吗？

没有太多的在线解释，谢谢！

Answer 1

返回设置/更新动画值的函数。可以使用该函数为已设置动画的变量指定新值。然后，您可以使用

属性更新滚动位置。

定义您的

如下所示：

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

然后使用

函数来启动弹簧，如下所示：

{
          setY({ y: scrollDestinationRef.current.getBoundingClientRect().top });
        }}
      >
        Click to scroll

单击该按钮时，将为其分配一个新值

变量，并且

函数将在每次更新时调用。

请注意，我们调用

函数来源

中的属性

..。

查看工作演示

这里

..。

Answer 2

const targetElement = useRef(null)
const [, setY] = useSpring(() => ({ y: 0 }))

let isStopped = false
const onWheel = () => {
  isStopped = true
  window.removeEventListener('wheel', onWheel)
}

const scrollToTarget = () => {
  const element = targetElement.current
  const value = window.scrollY + element.getBoundingClientRect().top

  window.addEventListener('wheel', onWheel)

  setY({
    y: value,
    reset: true,
    from: { y: window.scrollY },
    onRest: () => {
      isStopped = false
      window.removeEventListener('wheel', onWheel)
    },
    onFrame: props => {
      if (!isStopped) {
        window.scroll(0, props.y)
      }
    }
  })
}

此版本还允许用户通过使用

事件。(我个人讨厌强制滚动:D)

返回一个

方法之外，还可以使用

..。但我不能让它工作。我把它贴到了一个相关的

github问题

..。如果你读了这篇文章，也许已经有了一个很好的答案:)

现在，它使用了一个小的变通方法

旗帜。

更新：

看起来好像真的有什么可疑之处

fn应在中寻址

v9金丝雀

..。还没有测试过，因为v9还不稳定。

Answer 3

终于打通了

https://github.com/pmndrs/react-spring/issues/544

，Yannick Schuchmann的回答对我很有效，我只需将onFrame更改为onChange

我为解决方案定制了一个钩子：

https://github.com/TomasSestak/react-spring-scroll-to-hook

react-sring版本: 9.0.0-rc.3