Estoy tratando de hacer que una galería de barra deslizante se desplace con Mouse Teaching en JavaScript, pero tengo un problema cuando trato de desplazarme al tocar el elemento que tiembla, me gustaría saber qué estoy haciendo mal.
Mi grabación de pantalla: demostración del problema
Mi código:
let mouseUpStatus = false; let mouseMoveStatus = false; let mouseEnterStatus = false; let pressed = false; let slidebar = document.querySelector(".box"); let inSlidebar = document.querySelector(".v"); let c = document.querySelector(".c"); let widthC = c.offsetWidth; let newX = 0; slidebar.addEventListener('mousemove', (e) =>{ if(pressed){ newX = widthC+e.offsetX; inSlidebar.style.transform = "translateX("+newX+"px)"; } }); slidebar.addEventListener('mouseup', (e) =>{ pressed = false; }); slidebar.addEventListener('mousedown', (e) =>{ pressed = true; }); div.box{ width: 480px; overflow: hidden; } div.v{ display: flex; transform: translateX(0px); } ::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } div.c { width: 24%; height: 60px; background-color: skyblue; flex-shrink: 0; margin-right: 1%; } <div class="box"> <div class="v"> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div class="c">7</div> </div> </div> let slidebar = document.querySelector(".box"); let inSlidebar = document.querySelector(".v"); let c = document.querySelector(".c"); let widthC = c.offsetWidth; let slidevalue = 0; function slideNext() { slidevalue += widthC; document.getElementById("vt").style.transform = "translateX(-"+ slidevalue + "px)"; } function slidePrev() { slidevalue -= widthC; document.getElementById("vt").style.transform = "translateX(-"+ slidevalue + "px)"; } div.box{ width: 480px; overflow: hidden; } div.v{ display: flex; transform: translateX(0px); } ::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } div.c { width: 24%; height: 60px; background-color: skyblue; flex-shrink: 0; margin-right: 1%; } <table> <tr> <td><button id="prev" onclick="slidePrev()">left</button></td> <td> <div class="box" > <div class="v" id="vt"> <div class="c" >1</div> <div class="c" >2</div> <div class="c" >3</div> <div class="c" >4</div> <div class="c" >5</div> <div class="c" >6</div> <div class="c" >7</div> </div> </td> <td><button id="next" onclick="slideNext()">right</button></td> </div> </tr> </table>Encontré el problema: es porque el mouse se mueve muy rápido. Estoy usando la propiedad CSS left y agrego que e.target.offsetLeft en lugar de e.offsetX e inSlidebar.style.left en lugar de inSlidebar.style.transform
El nuevo CSS se ve así:
div.v { display: flex; position: relative; top: 0; left: -10px; transform: translateX(0px); transition: left 2s; }