Javascript 检测组件是否只能在滚动上查看一次

我的react web应用在一个页面上呈现多个组件。当用户滚动到某个特定组件/div已进入视图时，它应该执行一些操作，例如console.log（）。此事件应仅在第一次触发一次，而不是在上下滚动时反复触发

根据我的例子，我有一个灰色背景的组件。一旦该组件中的标题进入视图，就应该触发单个事件。当用户不断向下滚动并且标题消失在视野之外时，它不应该触发任何事件

在我当前的工作实现中，滚动时，只要所需组件进入视图，就会触发console事件。但它不是只触发一次，而是持续不断地触发事件，即使所需组件不在视图中

以下是我迄今为止所取得成就的链接：

---

这一切似乎只有在代码沙箱中才能正常工作，但在实际实现中却不行。非常感谢您提供的任何帮助。

之所以要多次记录控制台日志，是因为每次滚动事件都会调用

scrollHandler

。您正在检查

window.pageYOffset+window.innerHeight>=hiddenRef.current.offsetTop

，当您滚动过组件时，这是真的

我建议你看看这个问题和答案：并看看十字路口观察员：