javascript - 垂直滚动时不允许水平滚动(反之亦然)

Question

我有一个列表，其中 overflow-x 和 overflow-y 设置为 auto。此外，我还使用 webkit-overflow-scrolling: true 设置了动量滚动，因此触摸滚动在移动设备上效果很好。

但是，问题是我无法弄清楚如何在垂直滚动时禁用水平滚动。它会导致非常糟糕的用户体验，因为向左上方或右上方滑动将导致表格对 Angular 滚动。当用户垂直滚动时，我绝对不希望任何水平滚动，直到用户停止垂直滚动。

我尝试过以下方法:

JS:

offsetX: number;
offsetY: number;
isScrollingHorizontally = false;
isScrollingVertically = false;

//Detect the scrolling events
ngOnInit() {
    this.scrollListener = this.renderer.listen(
      this.taskRows.nativeElement,
      'scroll',
      evt => {
        this.didScroll();
      }
    );

    fromEvent(this.taskRows.nativeElement, 'scroll')
      .pipe(
        debounceTime(100),
        takeUntil(this.destroy$)
      )
      .subscribe(() => {
        this.endScroll();
    });
}

didScroll() {
    if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) && (!this.isScrollingHorizontally)){
        console.log("Scrolling horizontally")
        this.isScrollingHorizontally = true;
        this.isScrollingVertically = false;
        this.changeDetectorRef.markForCheck();
    }else if ((this.taskRows.nativeElement.scrollTop != this.offsetY) && (!this.isScrollingVertically)) {
        console.log("Scrolling Vertically")
        this.isScrollingHorizontally = false;
        this.isScrollingVertically = true;
        this.changeDetectorRef.markForCheck();
    }
}

endScroll() {
    console.log("Ended scroll")
    this.isScrollingVertically = false;
    this.isScrollingHorizontally = false;
    this.changeDetectorRef.markForCheck();
}

HTML:

<div
    class="cu-dashboard-table__scroll"
    [class.cu-dashboard-table__scroll_disable-x]="isScrollingVertically"
    [class.cu-dashboard-table__scroll_disable-y]="isScrollingHorizontally"
>

CSS:

&__scroll {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  will-change: transform;
  -webkit-overflow-scrolling: touch;

  &_disable-x {
     overflow-x: hidden;
  }

  &_disable-y {
    overflow-y: hidden;
  }
}

但是每次我在滚动时将 overflow-x 或 overflow-y 设置为 hidden 时，滚动会出现故障并跳回顶端。我还注意到 webkit-overflow-scrolling: true 是发生这种情况的原因，当我删除它时，该行为似乎停止了，但我绝对需要它来在移动设备中进行动量滚动。

如何在垂直滚动时禁用水平滚动？

Answer 1

对于您的设计来说，在移动设备上需要多轴滚动通常是一种不好的做法，除非您可能要显示大量数据表。话虽这么说，你为什么要阻止它呢？如果用户想要对 Angular 滚动，对我来说这似乎并不是世界末日。某些浏览器(例如 OSX 上的 Chrome)已经默认执行您所描述的操作。

如果您必须进行单轴滚动，一个可能的解决方案可能是通过 touchstart 和 touchmove 事件自行跟踪滚动位置。如果您将拖动阈值设置为低于浏览器的阈值，则可以在开始滚动之前执行 CSS 操作，从而避免感知到的故障。此外，即使仍然出现故障，您也可以获得触摸开始和触摸的当前位置。由此，如果您记录了 div 的起始滚动位置，则可以手动将 div 滚动到正确的位置，以在必要时抵消它跳到顶部的情况。可能的算法可能如下所示:

// Touchstart handler
if (scrollState === ScrollState.Default) {
    // Record position and id of touch
    touchStart = touch.location
    touchStartId = touch.id.
    scrollState = ScrollState.Touching

    // If you have to manually scroll the div, first store its starting scroll position:
    containerTop = $('.myContainer').scrollTop();
    containerLeft = $('.myContainer').scrollLeft();
}

// Touchmove handler - If the user has dragged beyond a distance threshold,
// do the css classes swap.
if (touch.id === touchStartId && distance(touchStart, touch.location > threshold) {
    scrollState = ScrollState.Scrolling;
    swapCssClasses();

    // If you have to manually scroll the div to prevent jump:
    $('.myContainer').scrollTop(containerTop + (touch.location.y - touchStart.y));
    // Do the same for horizontal scroll.
}

// Then, listen for debounced scroll events, like you're already doing,
// to reset your state back to default.

第二个想法:在滚动处理程序中，不要更改 css 类，而是直接为要锁定的轴设置 div 的滚动位置。 IE，如果您水平滚动，请始终将scrollTop 设置为其起始值。这也可能会取消滚动，不确定。您必须尝试一下，看看它是否有效。