Framer Motion 不更新 scrollYProgress

Question

我正在使用Framer Motion 的useViewportScroll掛鈎來跟蹤用戶在我的頁面上的滾動，但它沒有更新。 我看到了這篇文章，它解釋了 Framer Motion 如何使用document.body.clientHeight和window.innerHeight來計算視口滾動。

這篇文章解釋了一些 CSS 如何打破這一點，特別是如果document.body.clientHeight - window.innerHeight <= 0 。

我似乎無法弄清楚這怎么會不是真的。 即使在我的反應應用程序中根本沒有 CSS，該表達式的計算結果為真。 您可以在 CodeSandbox 上的此示例中看到它。

謝謝！

Answer 1

我認為您沒有看到更新的原因不是因為任何 css。
Framer 似乎從反應中計算出它是獨立的 state。 因此，當 Framer 在內部更新其值時。 react 不一定會使用更新的值觸發重新渲染。 （可能這是為了性能）。

您可以通過訂閱 Framer 公開的onChange處理程序並設置您感興趣的 state 來掛鈎 state 更改。

例如， scrollYProgress上的onChange將調用setState ，觸發對重新渲染的反應。

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

沙盒示例