Tengo un bloque móvil, que se mueve en el eje x, pero quiero desplazarme hacia abajo con el tacto sin mover el bloque móvil. Si muevo el bloque hacia la izquierda o hacia la derecha, debe moverse. Pero si uso el toque para desplazarme por la página, el bloque móvil no debería moverse.
HTML:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Swipe</title> </head> <body> <h1 class='h1'>OPEN MOBILE VIEW IN DEVTOOLS</h1> <div class="container"> <div class='movable-block'> <span class="movable-block__title">Movable block</span> <div class="movable-block__line"></div> </div> </div> </body> </html>JS:
const container = document.getElementsByClassName('container')[0]; const movableBlock = document.getElementsByClassName('movable-block')[0]; container.addEventListener('touchstart', () => { container.addEventListener('touchmove', (event) => { movableBlock.style.left = event.touches[0].pageX - movableBlock.offsetWidth / 2 + 'px'; }); });Ejemplo en jsfiddle (vista móvil abierta en devtools): https://jsfiddle.net/farrow/k3m8dy0b/93/