React framer-motion - 如何從特定的div開始計算scrollYProgress

Question

我想要做的是在視口到達容器頂部時計算scrollYProgress ，離開盒子時scrollYProgress應該是1。 我該怎么做？

當前的問題是scrollYProgress在應用程序的頂部開始計數。

應用程序.js

import React, { useState, useEffect } from "react";
import "./styles.css";
import { motion, useViewportScroll } from "framer-motion";

export default function App() {
  const { scrollYProgress } = useViewportScroll();

  useEffect(() => {
    return scrollYProgress.onChange((v) => {
      console.log(v);
    });
  }, [scrollYProgress]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <motion.div>
        <div
          style={{ height: "500px", margin: "1rem", border: "1px solid grey" }}
        >
          How to start Counting the percentage from 0 here
        </div>
      </motion.div>
      <h2>The percentage will be 100% when arriving the end of the box</h2>
    </div>
  );
}

代碼沙盒
https://codesandbox.io/s/adoring-poincare-curjo?file=/src/App.js:177-192