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

Question

[Александр]

Есть страница на сайте с списком фотографов.
У каждого элемента списка есть фотографии которые можно листать при помощи свайпов.
Реализовано через события 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;
                }
            });

Answer 1

[Владислав Радзимовский]

Попробуйте stopimmediatepropagation() или stopPropagation()

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

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

Comments

[Александр]

Работает не так как нужно.
Вот код :

$('#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) {
                        e.stopimmediatepropagation();
                        $(photos).css('left', (photosLeft + touchDiffX) + 'px');
                    }
                } else {
                    return false;
                }
            });

При вертикальных свайпах - нормально скроллится - как и должно.

При горизонтальных - листает фотки, но не выполняет :

$(photos).css('left', (photosLeft + touchDiffX) + 'px');

Т.е. не происходит красивого сдвига картинки засчет горизонтально touchmove.
Логично что из за "e.stopimmediatepropagation();".
Так что вопрос так и остается :
Можно ли заблокировать только вертикальный скролл при событии touchmove?
Не блокируя само событие touchmove

[Владислав Радзимовский]

saimon108, Возможно вам просто обработчик переместить из main на сами списки фотографий?

Если main - основной блок в принципе не странно почему все не работает
touchmove листает встроенными методами js ваш блок, и stopImmediatePropagation не отрабатывает как нужно, так как событие доходит собственно до блока к которому не должно доходить

Если не выйдет - залейте код на какой-то js-fiddle, или дайте живой пример с кодом и html, что бы можно было полностью увидеть проблему

[Александр]

Владислав Радзимовский,
Просто
$('#main').on('touchmove', photoWrap, function(e){
photoWrap и есть блоки с фотками.
А само событие на #main, так как блоки меняются при помощи аякс при листании каталога фотографов.
Получается прийдется после каждого листания и замены контента отбиндивать старые обработчики и биндить новые.

Answer 2

[supertok]

Вот моя реализация на VUE, думаю переделать на чистый js будет нетрудно
Идея в том что по горизонтали двигаем сами с помощью translateX по вертикали же запрещаем если горизонтальный свайп больше вертикального

data () {
    return {
      isDesktop: true,
      slideIndex: 0,
      sliderContainerWidth: 0,
      touchStartX: null,
      touchMoveX: null,
      touchMoveY: null,
      translateX: 0,
      currTransformX: 0,
      isMouseDown: false,
    };
  },
 methods: {
  onTouchStart (event) {
      this.touchStartX = event.touches[0].clientX;
      this.touchStartY = event.touches[0].clientY;
    },

    onTouchMove (event) {
      this.touchMoveX = event.touches[0].clientX;
      this.touchMoveY = event.touches[0].clientY;

      const dx = Math.abs(this.touchMoveX - this.touchStartX);
      const dy = Math.abs(this.touchMoveY - this.touchStartY);

      if (dx > dy) {
        event.preventDefault(); // запрещаем вертикальную прокрутку, если свайп горизонтальный
        this.translateX = this.touchMoveX - this.touchStartX; // разница координат между началом свайпа и текущим состоянием пальца
        this.$refs.sliderWrapper.style.transform = `translateX(${this.currTransformX + this.translateX}px)`; // сдвигаем слайдер на нужное количество пикселей вправо или влево в зависимости от знака this.translateX
      }
    },
}