Framer Motion 不更新scrollYProgress

Question

我正在使用Framer Motion 的useViewportScroll挂钩来跟踪用户在我的页面上的滚动，但它没有更新。我看到这篇文章，它解释了 Framer Motion 如何使用document.body.clientHeight和window.innerHeight计算视口滚动。

这篇文章解释了一些 CSS 如何打破这个问题，特别是如果document.body.clientHeight - window.innerHeight <= 0.

我似乎无法弄清楚这怎么不是真的。即使我的 React 应用程序中根本没有 CSS，该表达式的计算结果也为 true。您可以在 CodeSandbox 上的示例中看到它。

谢谢！

Answer 1

请注意，现在onChange()已弃用并替换为useMotionValueEvent().

拉斯答案的更新如下：useMotionValueEvent()

import React from "react";
import { useMotionValueEvent, useScroll } from "framer-motion"

const FramerPostionHook = () => {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end end"],
  });
  const [hookedYPostion, setHookedYPosition] = React.useState(0);
  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    setHookedYPosition(latest);
  })

  return  (<>
  scrollYProgress.current: {scrollYProgress.current}<br/>
  scrollYProgress.hookedYPostion: {hookedYPostion}<br/>
  </>)
}

Answer 2

我认为你看不到更新的原因不是因为任何CSS。Framer 似乎独立
于 React 来计算它的状态。所以当 Framer 在内部更新它的值时。React 不一定会触发更新值的重新渲染。（可能这样做是为了性能）。

您可以通过订阅 Framer 公开的处理程序来挂钩状态更改onChange，并设置您感兴趣的状态。

例如，onChangeonscrollYProgress会调用setState，触发 React 重新渲染。

import React from "react";
import { useViewportScroll } from "framer-motion"

const FramerPostionHook = () => {
  const { scrollYProgress } = useViewportScroll();
  const [hookedYPostion, setHookedYPosition] = React.useState(0);
  React.useEffect(()=>{
    // hook into the onChange, store the current value as state.
    scrollYProgress.onChange(v=> setHookedYPosition(v));
  },[scrollYProgress]); //make sure to re-subscriobe when scrollYProgress changes

  return  (<>
  scrollYProgress.current: {scrollYProgress.current}<br/>
  scrollYProgress.hookedYPostion: {hookedYPostion}<br/>
  </>)
}

沙盒示例