iPhone上的Touchmove事件停止垂直滚动

时间:2018-07-24 11:04:05

标签: javascript html ios iphone

由于某种原因,垂直滚动在iPhone中不起作用,即使在Chrome中也不起作用,但是在Android上一切正常。

我制作了gif以便您了解:

iPhone X, mobile Safari

Galaxy S9, Chrome

这是我处理触摸事件的代码:

onTouchstart(event) {
  this.xTouchStart = event.touches[0].pageX;
  this.yTouchStart = event.touches[0].pageY;
},
onTouchmove(event) {
  const xPosition = event.touches[0].pageX;
  const yPosition = event.touches[0].pageY;
  this.isTouched = true;

  if (this.isVerticalScroll) {
    // just continue to scroll vertically
    return;
  }

  if (Math.abs(this.yTouchStart - yPosition) < 50) {
    const movedTo = xPosition - this.xTouchStart;
    // cancel the vertical scroll if the user is within +-50px vertically from the yTouchStart
    event.preventDefault();
    // move the slides
    this.xTouchMove = movedTo;
  } else {
    // the user has gone beyond + - 50px
    this.isVerticalScroll = true;
    // return to the place of the shifted slide
    this.xTouchMove -= this.xTouchMove;
  }
},
onTouchend (event) {
  if (!this.isTouched) {
    return;
  }
  if (this.isVerticalScroll) {
    this.isVerticalScroll = false;
    return;
  }

  let iconsMoved =  Math.abs(Math.floor(this.xTouchMove / this.imageWidth));
  if (iconsMoved <= 0) {
    iconsMoved = 1;
  }
  if (this.xTouchMove > 0) {
    this.toLeft(iconsMoved);
  } else {
    this.toRight(iconsMoved);
  }
  this.isTouched = false;
}

请帮帮我

0 个答案:

没有答案