Tengo dos líneas de texto en el medio de mi página que quiero que se desplacen horizontalmente desde fuera de la página para entrar y luego salir por el otro lado. La de arriba viene de la izquierda y existe por la derecha y la segunda línea hace lo contrario. Mi problema es que scrollY no se mantiene constante cuando cambias el tamaño de la pantalla.

¿Existe una buena solución para desplazar el texto solo cuando llega a esa sección particular de la página? En este momento, la sección llega a 2200 px cuando está a la vista y estoy usando ese número para activar el desplazamiento.

Tengo este gancho que escucha el pergamino:

 export default function useScrollListener() { const [data, setData] = useState({ x: 0, y: 0, lastX: 0, lastY: 0 }); // set up event listeners useEffect(() => { const handleScroll = () => { setData((last) => { return { x: window.scrollX, y: window.scrollY, lastX: last.x, lastY: last.y }; }); }; handleScroll(); window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return data; }

En la página que tiene las dos líneas que tengo:

 const scroll = useScrollListener(); const [position, setPosition] = useState('') useEffect(() => { let pos = scroll.y let scrollPos = pos - 3000 // Section with the lines of text starts around 2200 on scrollY if(scroll.y > 2200){ setPosition(scrollPos.toString()) } }, [scroll.y]);

El texto se envuelve alrededor de un div que es relativo y el texto tiene una posición absoluta que empuja el elemento hacia la derecha o hacia la izquierda en 800 px.

 <div className="line1"> <p className="text1" style={{"left": `${position}px`}}> Lorem ipsum dolor sit amet. </p> </div> <div className="line2"> <p className="text1" style={{"right": `${position}px`}}> Lorem ipsum dolor sit amet. </p> </div>