0
248
VistasCómo mover una barra de desplazamiento junto con la posición izquierda de su <div> (posiblemente con React)
Tengo un control deslizante horizontal con muchas "tarjetas".
El código JS que define su CSS es el siguiente:
cardCarouselSlider: { zIndex: 0, overflow: 'hidden', width: 300 * cardsNumber, height: 200, position: 'absolute', left: (targetedPlanIndex >= 0) ? -281 * targetedPlanIndex + 40 : -281 * (targetedPlanIndex + 1) + 40, transition: 'left 0.5s ease', }, Como muestra el valor de la left , puedo hacer que el control deslizante se deslice horizontalmente cambiando el valor de targetedPlanIndex .
Sin embargo, mi cliente quiere tener también una barra de desplazamiento (lo ves en la imagen) para poder desplazarse rápidamente entre las tarjetas.
El problema es: cuando aumento el targetedPlanIndex , el control deslizante se desplaza hacia la izquierda, pero la barra de desplazamiento permanece siempre pegada a su posición inicial. Vea la siguiente imagen, donde el índice se incrementó en 1:
Me gustaría ver que la barra de desplazamiento se deslice hacia la derecha cuando el control deslizante se mueve hacia la izquierda, como sucedería si usara la barra de desplazamiento para mover el control deslizante (vea la tercera imagen).
¿Alguna idea de cómo podría hacer esto?
Mi página está construida con React, por lo que básicamente creo que estoy dispuesto a adjuntar un detector de eventos de scroll a mi div de control deslizante, y no a todo el document . Después de eso, debería haber algún gancho useScrollPosition con el que jugar.
1 Respuestas
Responde la pregunta0
Después de continuar con esta búsqueda durante otro par de días, no he podido encontrar ejemplos de ganchos de React que puedan detectar/gestionar el desplazamiento de componentes individuales en la página, y mucho menos el desplazamiento horizontal.
Resolví mi problema dejando a un lado CSS e implementando una solución basada en JS/DOM, que atiende a los métodos Element que controlan eldesplazamiento .
Todas estas soluciones de React se basan en el uso de un gancho useRef vinculado al elemento de la página que se va a controlar y en el acceso a sus métodos a través de la propiedad current de la referencia.
El principal inconveniente de estas soluciones es que (independientemente de lo que parezcan prometer los estándares) no puedo aprovechar las funciones de aceleración de CSS para implementar una transición de desplazamiento suave: para eso, me vi obligado a usar una solución setInterval / setTimeout para realizar muchos desplazamientos parciales de mi componente.