Closed pedroaragon360 closed 4 years ago
Hola!
Estoy tratando de animar el desplazamiento horizontal de un elemento con scrollLeft hasta 100px cuando hago click en un boton.
He creado una referencia al elemento con const contenedorPreguntas = useRef(); y referenciado el elemento <div ref={contenedorPreguntas} >
const contenedorPreguntas = useRef();
<div ref={contenedorPreguntas} >
He creado un estado para tener seguimiento de por donde va el scroll: const [scrollX, setScrollX] = useState(0);
Y con un boton que ejecute el scroll <button onClick={scrollH}>Mover</button> Y la función
<button onClick={scrollH}>Mover</button>
const scrollH = (e) => { if(scrollX<100){ contenedorPreguntas.current.scrollLeft += 1; setScrollX(scrollX+1); setTimeout(function(){ scrollH(); },100); } }
El scroll funciona pero no para nunca, ya que scrollX siempre está a 0, y setScrollX no hace cambiar el valor, únicamente la primera vez que pincha el usuario. Me gustaría entender el funcionamiento y cómo solucionarlo. Gracias!
Hola!
Estoy tratando de animar el desplazamiento horizontal de un elemento con scrollLeft hasta 100px cuando hago click en un boton.
He creado una referencia al elemento con
const contenedorPreguntas = useRef();y referenciado el elemento<div ref={contenedorPreguntas} >He creado un estado para tener seguimiento de por donde va el scroll: const [scrollX, setScrollX] = useState(0);
Y con un boton que ejecute el scroll
<button onClick={scrollH}>Mover</button>Y la funciónEl scroll funciona pero no para nunca, ya que scrollX siempre está a 0, y setScrollX no hace cambiar el valor, únicamente la primera vez que pincha el usuario. Me gustaría entender el funcionamiento y cómo solucionarlo. Gracias!