Css 帧运动不更新scrollYProgress

我正在使用钩子跟踪用户在我的页面上的滚动，但它没有更新。我看到了这篇文章，它解释了帧运动如何使用

document.body.clientHeight

和

window.innerHeight

计算视口滚动

---

这篇文章解释了一些CSS是如何打破这一点的，特别是如果

document.body.clientHeight-window.innerHeight我认为你看不到更新的原因不是因为任何CSS。

Framer似乎从react计算它的状态。因此，当Framer在内部更新其值时react不一定会使用更新的值触发重新渲染。（这样做可能是为了提高性能）

通过订阅成帧者正在公开的
onChange
处理程序并设置感兴趣的状态，您可以钩住状态更改

例如，
scrollYProgress
上的
onChange
将调用
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/>
  </>)
}

从“React”导入React；
从“帧运动”导入{useViewportScroll}
常量FramerPostionHook=（）=>{
const{scrollYProgress}=useViewportScroll（）；
常量[HookedPosition，SetHookedPosition]=React.useState（0）；
React.useffect（（）=>{
//钩住onChange，将当前值存储为state。
scrollYProgress.onChange（v=>setHookedYPosition（v））；
}，[scrollYProgress]）；//确保在scrollYProgress更改时重新订阅
返回(
scrollYProgress.current:{scrollYProgress.current}

scrollYProgress.hookedPostion:{hookedPostion}

)
}