Как отменить срабатывание touchmove, если юзер свайпает вниз?
Пример на jsfiddle (откройте мобайл вью в devtools): https://jsfiddle.net/flarrow/k3m8dy0b/93/
Юзер может перемещать блок влево и вправо, но если юзер хочет проскролить страницу вниз с помощью touch, Movable block не должен перемещаться, как это можно сделать?
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';
});
});.container {
padding-top: 25px;
height: 1000px;
}
.movable-block {
position: absolute;
left: 500px;
width: fit-content;
}
.movable-block__title {
color: #fff;
padding: 25px;
background-color: red;
border: 1px solid black;
}
.movable-block__line {
margin: 0 auto;
background-color: red;
width: 5px !important;
height: 1000px;
}<div class="container">
<div class='movable-block'>
<span class="movable-block__title">Movable block</span>
<div class="movable-block__line"></div>
</div>
</div>