Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

257
Vistas
El desplazamiento en carrusel con TranslateX no genera elementos de desbordamiento (JS, CSS)

Estoy tan atascado y me pregunto si debería seguir confiando en translate3d para desplazarme.

Estoy creando mi propio control deslizante/carrusel personalizado que puede mostrar varios carteles a la vez según el tamaño de la pantalla. Pero cuando me desplazo con el mouse, obtengo resultados mixtos, si no uso los botones, se desplaza con el mouse hacia adelante y hacia atrás sin problemas, pero tan pronto como hago clic en cualquiera de los botones izquierdo/derecho, el ratón dejará de desplazarse.

Tengo un botón izquierdo y derecho (absoluto). En cada desplazamiento, desplazan un conjunto de elementos (3 - 5 elementos) usando translate3d(), y funcionan perfectamente bien y como se esperaba.

 <div class="container" style="display:flex; position:relative"> <!---- Slider ----> <div class="slider" style="display:flex;> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <!--- more slides --> </div> <!--- buttons on opposite ends of the slider, scrolls using translate3d() ---> <div class="left" style="position:absolute;"></div> <div class="right" style="position:absolute;"></div> </div>

Las soluciones que he intentado hacer que translate3d funcione están a continuación.

  • Obligue al navegador a crear una nueva capa agregando Translate3D() al control deslizante y todos sus elementos secundarios,
  • Invierta el contenedor, luego invierta el control deslizante para deshacer la inversión del contenedor. Para esto, probé tanto la escala de transformación como la dirección flexible, pero ninguno de ellos funcionó el 100% del tiempo. Resultados muy mixtos.
  • Will-change, estaba feliz cuando vi esto pero no funcionó.
  • Algunos métodos hacky más. Pero ninguno realmente funcionó para mí.

Mi instinto me dice que solo vaya con scrollLeft, o desplácese a la vista, y dé por terminado el día. Pero escuché que el rendimiento de translateX es muy superior, ¿se ha confirmado esto absolutamente? ¿Y existen alternativas bastante recientes y adoptadas que también funcionan bien?

Gracias

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda