问题标签 [react-intersection-observer]

我正在我的网站上创建一个功能，当您滚动经过某个 div 元素（即不再在视图中，使用react-intersection-observer）时，另一个元素会在其中动画（使用framer-motion useAnimation()钩子）

我在 nextjs 工作，页面是服务器端渲染的

我还使用了一个名为的 UI 库chakra-ui

我真的没有得到这个错误，因为逻辑很简单，如果<div>在视图中然后开始这个动画。

我想知道是否有人可以提供帮助。

我一直在研究很多解决方案来检查元素何时显示在视点中，目前正在尝试将此方法集成到我的项目中 - https://www.webtips.dev/webtips/react-hooks/element-in- viewport，此方法使用 refs 但是我希望在页面上拥有的内容不是静态的，而是映射的。我发现这种方法可以动态使用 refs - https://dev.to/nicm42/react-refs-in-a-loop-1jk4但是我认为我做错了，因为我收到以下错误：

TypeError：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型。

任何帮助都非常感谢。

非常感谢，代码如下。

组件.js

使用Intersection.js

我正在尝试使用交叉点观察器来延迟加载组件。父组件是有条件的，在搜索关键字之前不会立即呈现。当渲染的组件接触到正在加载的 div 时，应该触发交​​叉点观察器。我注意到交叉点观察器不会立即工作。

这是组件

这是用于初始化交叉点观察器的 useEffect

我是新来的反应，并且希望有一个很好的解释，无论我在“componentdidUpdate”的变量上犯了错误还是其他原因。谢谢

我正在尝试使用 react-intersection-observer 更改滚动时的背景视频。当 inView 更改为 true 时，useEffect 必须将 state 更改为 sample2，并将新视频发送到 startscreen，它用作固定位置的背景视频。状态在变，但视频还是一样。

//开始屏幕

//App.js

所以我有一个用例，其中我有一个需要渲染的元素列表。但是为了节省性能，我只需要显示当前视口中的那些。其他元素需要从视图中弹出。一旦出现，就需要放回去。我有一个正在使用的代码沙箱参考。但这似乎只适用于一个元素。我曾尝试使用它们的数组，但 isInView(the state) 对所有这些都是通用的，因此效果不佳。

我有一张从 Api 获得的卡片列表。卡片是用户在上一个选项卡上选择的产品。当用户向下滚动页面时，它们应该被加载。一切正常。但是如果用户滚动到最后并更新页面表情卡就会出现。

因此，我有一个主要组件，它从本地存储（用户选择的产品）中获取密钥并将密钥逐个发送到另一个组件。这个组件检查，如果有这个key的卡是可见的，通过这个key向Api发出请求。如果我滚动到最后并更新页面，我会看到空卡片。此外，在网络中，我看到 Api 请求仅针对前四张卡。但不是最后四个。

这是主要组件，将密钥发送到另一个组件。

常量 productsKeys = JSON.parse(localStorage.getItem(storageKey) ?? "[]");

这是另一个发送 Api 请求的组件

我正在尝试更改从顶部滚动 100 像素时固定在顶部的标题的背景颜色。如何使用 react-intersection-observer 实现这一点？如果视口滚动 100 像素，有什么方法可以向我的对象添加类名？

我正在尝试使用 Framer Motion 创建一个 React 网站，问题是我的动画在桌面视图中看起来不错，但在移动设备中却不是。现在我想禁用动画。我该怎么做呢？

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

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

让我给你看代码

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

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

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

总是假的。。

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

我尝试将 react-intersection-observer 和 framer 运动结合使用，以便在组件处于视图中时使用 useInView 挂钩启动动画。虽然它从大约 1100px 开始工作，但它不适用于移动视图。这是我下面的代码