javascript - 响应时反应交叉观察器不起作用

Question

我正在使用 react-intersection-observer 以便在组件处于视图中时制作一些动画。

它很酷，但是，当我尝试进入移动屏幕时，例如 633 像素宽度和 400 像素高度，它不起作用，我真的不知道为什么。

让我给你看代码

所以，我在这里做的是，我想知道用户何时看到 45% 的组件，但是，它总是给出错误，是因为这个组件很大，可能它的高度是 750px 甚至更多，手机屏幕的高度只有400px？我不知道...我只是想了解为什么它不起作用

const DifferentWorks = () => {
  const [scrollY, setScrollY] = useState(0);

  const { inView, ref } = useInView({ threshold: 0.45 });

  useEffect(() => {
    scrollYProgress.onChange(n => setScrollY(n));
  }, [inView, scrollYProgress, scrollY]);

console.log(inView)

  return (
    <div ref={ref}>
      <DifferentWorksHero>
      </DifferentWorksHero>
    </div>
  );
};

export default DifferentWorks;

让我告诉你什么是输出console.log(inView)

我从下到上滚动了所有组件，这是输出

总是假的。。

什么可能会产生该错误？为什么当我更改屏幕大小时它不起作用？，特别是当宽度为 663 像素且高度低于 500 像素时