Estoy tratando de mover un div de izquierda a derecha lentamente a medida que el usuario se desplaza hacia abajo. Debe permanecer dentro de su sección y no tiene que moverse hacia la izquierda cuando se desplaza hacia arriba.
Me pregunto cómo hacer esto sin usar ningún paquete externo. Esto es lo que tengo hasta ahora, pero el círculo termina desplazándose fuera de la página y necesito que permanezca en el lado derecho una vez que haya llegado allí.
<div className="App"> <div className="sectionOne"> <div className="circle styles" style={{ position: 'absolute', left: `${position}rem` }}></div> </div> <div className="sectionTwo"></div> </div> const [position, setPosition] = useState('70') function moveCircle() { const speed = 5 const scrolltop = window.pageYOffset const scrollAndSpeed = scrolltop / speed console.log(scrollAndSpeed.toString()) setPosition(scrollAndSpeed.toString()) } useEffect(() => { window.addEventListener( 'scroll', function () { requestAnimationFrame(moveCircle) }, false ) }, [])Me acabo de dar cuenta de que estás usando rem para el posicionamiento.
Entonces Math.min no funcionaría para este escenario. Puede usar la función de clamp css.
style={{ position: 'absolute', left: `clamp(0vw, ${position}rem, 100vw - 1rem)` }} Tenga en cuenta que el 1rem que he puesto allí debe ser el ancho del elemento .circle .