问题标签 [react-intersection-observer]

我正在 React 中构建滚动触发动画，但是某些元素在它们出现在视图中之前就被触发了。为此，我构建了一个用于触发的小组件：

为了更好地说明，我在这里画了草图：

黑框代表视口。有一个英雄部分，在页面加载时也会动画（黑框中的红色部分）。

在使用 scrollTriger 控件的下一部分中，元素已经被触发并且大致对应于视口高度。（视口下的绿框）

下面的蓝框与绿框中的元素相同，但它们一进入视口就会被触发。（期望的行为）蓝色和绿色框架具有相同的父级，并且没有进一步的区别。

在动画中，元素仅缩放，即高度不移动。

我找不到任何理由说明它的行为方式。

我正在尝试在用户使用交叉点观察者 API 滚动的页面上创建一个导航跟踪器，并且跟踪器显示页面上的哪个部分的反应类似于网站中显示的内容，带有此链接https://olaolu.dev/与滚动更改的框（滚动指示器），我已经创建了一个代码沙箱。任何可以帮助我的人都意义重大。一直在这里出错，甚至不知道该怎么做，链接到下面的代码沙箱

https://codesandbox.io/s/tender-oskar-rvbz5?file=/src/App.js

我正在尝试使用 Framer Motion 和react-intersection-observer包将相同的动画分配给组件的多个实例

这会导致动画仅在滚动到最后一个 LevelWrapper 组件时加载。然后将“inView”设置为 true，所有组件同时进行动画处理。在 react-intersection-observer 包文档中，有一些关于在单个 useCallback 中包装多个 ref 分配的信息，所以我尝试过：

但是动画仍然不会为每个 LevelWrapper 组件单独触发。发生了什么？

我正在尝试在 UseEffect 中使用 IntersectionObserver，它工作正常，但 TypeScript 抱怨 cachedRef。它说： 'HTMLDivElement | 类型的参数 null' 不可分配给 'Element' 类型的参数。

我已经看到了这个问题，但不知道如何将它应用到我的代码中。如果可能的话。

有任何想法吗？谢谢！