Estoy usando este gancho para obtener el desplazamiento desde la parte superior de la página hasta la parte superior de un elemento. Parecía funcionar bien hasta que comencé a navegar a través de las rutas de mi página de enrutador de reacción.

 const usePosition = () => { const [dimensions, setDimensions] = useState({ height: window.innerHeight, width: window.innerWidth, }); const [offsets, setOffsets] = useState({ offsetTop: 0, offsetBottom: 0, }); const ref = useRef(); const handleResize = () => { setDimensions({ height: window.innerHeight, width: window.innerWidth, }); }; useLayoutEffect(() => { const position = ref.current.getBoundingClientRect(); setOffsets({ offsetTop: window.pageYOffset + position.top, offsetBottom: window.pageYOffset + position.bottom, }); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, [ref, dimensions, setOffsets]); return [ref, offsets, dimensions]; }; export default usePosition;

Al cargar el sitio web, este elemento ImagesBanner funcionaría bien, pero cuando me iría y luego volvería a la ruta con mi ImagesBanner, getBoundingClientRect(); devuelve un valor superior e inferior incorrecto, por lo tanto, descarta la animación.

 const ImagesBanner = () => { const [images, setImages] = useState([]); const [ref, offsets, dimensions] = usePosition(); const { scrollY } = useViewportScroll(); const fetchImages = async () => { const images = await getClientImages(); setImages(images); }; const transformX = useTransform( scrollY, [offsets.offsetTop - dimensions.height, offsets.offsetBottom], [ (images.length * 450 - 200) * -1 + dimensions.width / 2, images.length * 450 - 200 - dimensions.width / 2, ] ); useEffect(() => { fetchImages(); }, []); return ( <div className="images-banner"> <div className="images-banner__title"> <h2 className="heading">Our Clients</h2> </div> <motion.div className="images-banner__slider" ref={ref} style={{ left: transformX }} > {images.map((image) => ( <div key={image.node.id} className="images-banner__slide"> <img src={image.node.logo.url} alt={image.node.client} /> </div> ))} </motion.div> </div> ); }; export default ImagesBanner;

Cualquier ayuda sería muy apreciada.