0
180
Views¿Cómo hacer un div scrollLeft basado en clientX mousemove?
Tengo un div desplazable que quiero desplazar al arrastrar el mouse dentro de él.
Tengo una implementación muy básica en este lápiz de código .
Sin embargo, no puedo entender cómo pensar en scrollLeft y clientX . Creo que necesito 😵💫 para establecer la posición scrollLeft en el clientX + the position of the scrollBar once the drag staretd . ¿Pero están de alguna manera en diferentes posiciones relativas?
Resultando en un poco de sensación de "salto" al comenzar a arrastrar.
function mouseMove(event) { if (!dragging) return; const {scrollLeft} = initScroll; // Even if I click exactly where the bar starts the positions are way off ... div.scrollLeft = event.clientX + scrollLeft; }En esta imagen, acabo de hacer clic al comienzo de la barra, pero scrollLeft está en 548 y clientX está en 282.
¿Cómo puedo hacer esto un poco más suave?
1 answers
Answer question0
Debe restablecer initPosition cada vez que el mouse se mueve y arrastra, y en lugar de reasignar scrollLeft , puede restarle la diferencia entre clientX e initPosition :
var dragging = false; var startX = 0; var elem = document.querySelector('.draggable'); document.addEventListener('mousedown', (e) => (dragging = true,startX = e.clientX)) document.addEventListener('mouseup', () => (dragging = false)) document.addEventListener('mousemove', function(e) { if (!dragging) return; elem.scrollLeft -= e.clientX - startX; startX = e.clientX; }) .draggable { overflow-y: auto; } .draggable .content { width: 200%; background-color: red; height: 100px; } <div class="draggable"> <div class="content"></div> </div>