Question

我在Angular 6项目中使用ngx-perfect-scrollbar插件，但我的问题是其他版本的perfect-scrollbar，基本上也只是嵌套滚动。

我正在尝试使用完善的滚动条嵌套并在移动环境中正确处理传播。例如，当用户在内部滚动容器中向下滑动时，仅应滚动内部容器直到到达底部为止，然后将事件传播到父容器。默认情况下，两个滚动容器都滚动。

基本上，我想实现与 wheelPropagation 事件相同的功能，仅适用于滑动/触摸事件。我看到perfect-scrollbar曾经具有 swipePropagation 配置，但是由于某些原因，它已被删除。

首先，我试图阻止 psScrollY / psScrollDown / psScrollUp 事件的传播，但是 $ event.stopPropagation（）在这些情况下没有执行任何操作。

我最终尝试处理基本的 touchmove 事件，该事件部分起作用。我将是否已到达内部容器的顶部或底部存储在变量（ scrollState ）中，并且可以根据需要停止传播。但是，这种解决方案的我的问题是，到达底部后，当事件传播到父级时，外部滚动条会跳转。我的猜测是，事件中收到的Y偏移量是错误的，因此它会补偿并移动外部滚动条，使其超出所需数量。

const currentY = event.touches[0].clientY;
if (currentY > this.lastY) {
  // Down
  if (this.scrollState !== 'top') {
    event.stopPropagation();
  }
} else if (currentY < this.lastY) {
  // Up
  if (this.scrollState !== 'bottom') {
    event.stopPropagation();
  }
} else {
  event.stopPropagation();
}
this.lastY = currentY;

有没有一种方法可以将TouchEvent正确地传播到外部滚动容器？也许可以使用perfect-scrollbar来解决它的简单方法？

处理嵌套滚动容器中的触摸事件传播

0 个答案: