saimon108
@saimon108
Frontend, Gamer, Bookworm

Как реализовать запрет вертикального скролла при горизонтальном touchmove?

Есть страница на сайте с списком фотографов.
У каждого элемента списка есть фотографии которые можно листать при помощи свайпов.
Реализовано через события touchmove.

Вопрос в том, что при свайпах не только меняется картинка, но происходит скролл страницы по свайпу.
Есть ли какой то способ блокировать вертикальный скролл на мобилках?

В идеале при touchmove должно измеряться горизонтальное и вертикальное смещение и если верикальное меньше горизонтального - должен происходить блок вертикальной прокрутки.

Всем заранее спасибо.

Событие event.stopPropagation(); не подходит так как оно блочит и горизонтальный touchmove, что не дает выполяться коду.
Сам пример кода :
$('#main').on('touchmove', photoWrap, function(e){
                if (touchNow) {
                    var touch = e.originalEvent.touches[0];
                    touchMoveX = touch.pageX;
                    touchMoveY = touch.pageY;
                    touchDiffX = (touchMoveX > 0) ? (touchMoveX - touchStartX) : 0;
                    touchDiffY = (touchMoveY > 0) ? (touchMoveY - touchStartY) : 0;
                    if (touchDiffX > touchDiffY) {
                        $(photos).css('left', (photosLeft + touchDiffX) + 'px');
                        e.stopimmediatepropagation();
                    }
                } else {
                    return false;
                }
            });
  • Вопрос задан
  • 963 просмотра
Пригласить эксперта
Ответы на вопрос 1
Lafafm
@Lafafm
Development lead, Full stack generalist
Попробуйте stopimmediatepropagation() или stopPropagation()

$('element').on("touchmove", function(e) {
    e.stopimmediatepropagation();
    // Или
    e.stopPropagation()
    ...
}


Можете почитать подробнее о функциях: Тут
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы