4

ドキュメント全体を読みました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

私は試行のために参照とフックを使用しています。

Web サイトのuseRef天井からオフセットされた上部を見つけるために、スクロール先が添付されます。

クリック時useStateに状態を切り替えてスクロールをトリガーします。

useSpring0 からスクロール先のスクロール トップ aka に移動するアニメーションをトリガーするために使用しgetBoundingClientRect().topます。

誰でもこれを解決するのを手伝ってもらえますか?

オンラインでの説明はあまりありません、ありがとう！

4

3 に答える 3

1 
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)
      }
    }
  })
}

wheelこのバージョンでは、ユーザーはイベントを使用して強制スクロールから抜け出すこともできます。(私は個人的に強制スクロールが嫌いです:D)

useSpring(fn)stop以外のメソッドを返しsetます。しかし、私はそれをうまく機能させることができませんでした。関連するgithub issueに投稿しました。あなたがこれを読んだら、おそらくそれに対する良い答えがすでにあるでしょう:)

今のところ、isStoppedフラグを使用して少し回避策を使用します。

アップデート：

v9 canarystopで対処する必要がある fnには、実際には怪しいものがあるようです。v9 はまだ安定していないため、テストしていません。

于 2019-10-10T16:22:05.153 に答える