Estoy tratando de implementar un intersectionObserver para ver si un <Header/> isIntersecting , pero específicamente solo con otro <Component/>
MI INTENTO
import React, { useRef, useEffect } from "react"; import "./styles.css"; import Header from "./components/Header"; import SomeComponent from "./components/SomeComponent"; export default function App() { const header = useRef(null); const component = useRef(null); const handleOverlap = (entries, observer) => { entries.forEach((entry) => { console.log(entry.isIntersecting); }); }; useEffect(() => { const options = { root: component.current, rootMargin: "10px", threshold: 0.1 }; const observer = new IntersectionObserver(handleOverlap, options); observer.observe(header.current); }, []); return ( <div className="App"> <Header ref={header} /> <div style={{ backgroundColor: "pink", height: "100vh" }}></div> <SomeComponent ref={component} /> </div> ); } Mi resultado deseado es recibir un valor true si en el punto en que el usuario se desplaza y el componente del encabezado se cruza con el componente de destino. Establecí la root en el objeto de options en una ref del componente de destino. Definitivamente me falta algo de lógica clave en alguna parte. Cualquier ayuda sería genial.
SALVADERA
https://codesandbox.io/s/friendly-shirley-u603gt?file=/src/App.js
Compartiendo mi solución en caso de que alguien alguna vez esté en una situación similar.
Mi solución fue buscar un evento de scroll en lugar de usar la intersectionObserver Creo que porque mi <Header/> es un elemento de posición fixed , se saca del flujo del documento y el observador no puede detectar una intersección válida entre los dos componentes .
En cambio, mi función checkIfHeaderIsOverlapping llama a .getBoundingClientRect() en la ref de cada componente y aplica una lógica simple para detectar una superposición o intersección.
SOLUCIÓN
import React, { useRef, useEffect, useState } from "react"; import "./styles.css"; import Header from "./components/Header"; import SomeComponent from "./components/SomeComponent"; export default function App() { const [isOverlapping, setIsOverlapping] = useState(false); console.log("is it true? =>", isOverlapping); const header = useRef(null); const component = useRef(null); function checkIfHeaderIsOverlapping() { if (header.current && component.current) { const a = header.current.getBoundingClientRect(); const b = component.current.getBoundingClientRect(); if (a.top <= b.top + b.height && a.top + a.height > b.top) { setIsOverlapping(true); } else { setIsOverlapping(false); } } } useEffect(() => { function watchScroll() { window.addEventListener("scroll", checkIfHeaderIsOverlapping); } watchScroll(); return () => { window.removeEventListener("scroll", checkIfHeaderIsOverlapping); }; }); return ( <div className="App"> <Header ref={header} /> <div style={{ backgroundColor: "pink", height: "100vh" }}></div> <SomeComponent ref={component} /> <div style={{ backgroundColor: "green", height: "100vh" }}></div> </div> ); }SALVADERA
https://codesandbox.io/s/friendly-shirley-u603gt?file=/src/App.js