检测组件是否只能在滚动时查看一次[重复]

Question

我的 React Web 应用程序在一个页面上呈现了多个组件。当用户滚动到足以看到特定组件/div 时，它现在应该执行一些操作，例如 console.log()。此事件应仅在第一次触发时触发一次，而不是在上下滚动时反复触发。

因此，根据我的示例，我有一个灰色背景的组件。只要该组件内的标题出现，就应该触发一个事件。当用户继续向下滚动并且标题消失时，它不应触发任何事件。

使用我当前的工作实现，在滚动时，只要看到所需的组件就会触发控制台事件。但它不是只触发一次，而是会持续不断地触发事件，即使所需的组件不在视野范围内。

这里是我到目前为止能够实现的链接：

https://codesandbox.io/s/wild-water-8l056?file=/src/componentTrack.js

这一切似乎只在代码沙箱中运行良好，但在实际实现中却不行。任何解决它的帮助表示赞赏。

Answer 1

您多次使用控制台日志的原因是每次滚动事件都会调用scrollHandler。您正在检查window.pageYOffset + window.innerHeight >= hiddenRef.current.offsetTop，当您滚动经过组件时，这是真的。

我建议你看看这个问题和答案：React - check if element is visible in DOM 并查看 Intersection Observer：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API