Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

267
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda