¿Cómo podemos identificar que el evento onScoll llega a un componente específico? He intentado usar ref para desplazarme a la vista que funciona cuando activamos el evento de clic. Pero cómo funciona, el usuario se desplaza hacia abajo y llega a un componente específico, en ese momento debo realizar alguna tarea. ¿Cómo podemos lograr eso?

 import "./styles.css"; import { useRef, useEffect } from "react"; export default function App() { const eipCard = useRef(null); const salaryCard = useRef(null); const salesCard = useRef(null); const handleStickyHeader = () => { //handle logic // should trigger scroll reaches eip card console.log("reaches eip card") // should trigger scroll reaches salary card console.log("reaches salary card") // should trigger scroll reaches sales card console.log("reaches sales card") }; useEffect(() => { if (typeof window !== "undefined") { window.addEventListener("scroll", handleStickyHeader); } return () => window.removeEventListener("scroll", handleStickyHeader); }, []); return ( <div className="App"> <div ref={eipCard} style={{ height: "500px", backgroundColor: "red" }} ></div> <div ref={salaryCard} style={{ height: "500px", backgroundColor: "blue" }} ></div> <div ref={salesCard} style={{ height: "500px", backgroundColor: "blue" }} ></div> </div> ); }