Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

259
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!