无法在全宽 PrimeNg 轮播的移动设备上垂直滚动页面

Question

我的页面上有一个全宽轮播，页面的大部分区域都被轮播覆盖。在移动屏幕上，当我尝试垂直滚动时，它不起作用。

您可以在此处检查行为，尝试在图像上滚动。 https://primefaces.org/primeng/showcase/#/carousel

Answer 1

我已经找到了解决这个问题的方法。如果我们重写 onTouchMove 方法，滚动将开始工作。因为在该方法的插件实现中，默认事件被阻止。

import { Carousel } from 'primeng/carousel';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {

    constructor() {
        Carousel.prototype.onTouchMove = () => { };
    }
}

Answer 2

@sushil kumar 代码运行完美。谢谢。

constructor() {
    Carousel.prototype.onTouchMove = () => { };
}

Answer 3

@Sushil Kumar 你的解决方案对我帮助很大。谢谢。我只是强类型化了覆盖方法，因此它符合我的 linting 规则。我的代码如下所示：

Carousel.prototype.onTouchMove = (): void => undefined;

Answer 4

我能够使用下面的代码改善触摸滚动的感觉。

它利用 git 存储库中的 primeng 代码，但在检测到水平滚动时也会阻止垂直滚动。

  Carousel.prototype.onTouchStart = function (e: TouchEvent) {
    let touchObject = e.changedTouches[0];
    this.startPos = {
      x: touchObject.pageX,
      y: touchObject.pageY,
      clientX: touchObject.clientX,
      clientY: touchObject.clientY,
      isHorizontalScroll: false
    };
  };
  Carousel.prototype.onTouchMove = function (e: TouchEvent) {
    const touch = e.touches[0];
    const deltaX = touch.clientX - this.startPos.clientX;
    const deltaY = touch.clientY - this.startPos.clientY;

    if (!this.startPos.isHorizontalScroll) {
      this.startPos.isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY);
    }

    if (this.startPos.isHorizontalScroll) {
      // stop any scrolling
      if (e.cancelable) e.preventDefault();
    }
  };
  Carousel.prototype.onTouchEnd = function (e: TouchEvent) {
    let touchObject = e.changedTouches[0];
    const threshold = 110; // horizontal threshold for swipe

    if (this.isVertical()) {
      this.changePageOnTouch(e, touchObject.pageY - this.startPos.y);
    } else {
      const deltaX = e.changedTouches[0].clientX - this.startPos.clientX;
      const deltaY = e.changedTouches[0].clientY - this.startPos.clientY;
      if (Math.abs(deltaX) > threshold && Math.abs(deltaX) > Math.abs(deltaY)) {
        if (e.cancelable) e.preventDefault();
        this.changePageOnTouch(e, touchObject.pageX - this.startPos.x);
      }
    }
  };