I have movable block, which moves on x-axis, but i want to scroll page down by touch without moving movable block. If i move block to the left or to the right, it should be moved. But if i use touch to scroll page, movable block shouldn't be moved.
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';
});
});
Example on jsfiddle (open mobile view in devtools): https://jsfiddle.net/flarrow/k3m8dy0b/93/