React-相对于onScroll上的视口获取组件位置，最好以百分比为单位

Question

希望找到一些好的解决方案，因为我正在努力解决这一问题，并且还没有找到任何库。

我确切需要的是在滚动时以及仅在其视口中跟踪组件的位置（Y）。当组件在底部进入视口时，我需要0；当同一组件的底部到达视口的顶部时，我需要100。（反之亦然）。也可以是同一页面上的多个组件。

这是到目前为止我拥有的简单功能组件。任何帮助表示赞赏！谢谢

还有CodeSandbox在这里：https://codesandbox.io/s/wispy-bird-yyq24?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect, useRef } from "react"

const SepFramer = () => {
  const [scrollY, setScrollY] = useState(0);
    const sepRef = useRef();

  function logIt() {
    let offsetTop = sepRef.current.offsetTop - window.pageYOffset;
    console.log(offsetTop)
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logIt);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logIt);
    };
  });  

  return (
    <div className="separator" ref={sepRef}>
        Content
    </div>
  )
}

export default SepFramer

Answer 1

时，跟踪组件的位置（Y）

当组件穿过视口的底部时

Math.round(((window.innerHeight-offsetTop) * 100) / sepRef.current.clientHeight)