ngx-perfect-scrollbar嵌套滚动问题：区块触顶/底时页面同步滚动

这个问题我之前也碰到过！根源在于ngx-perfect-scrollbar默认开启了wheelPropagation特性——当内部固定高度的滚动区块滚到顶部或底部时，滚动事件会向上冒泡到页面级的滚动容器，导致页面滚动条也跟着动。给你两个解决方案，优先用第一个，简单又靠谱：

方案1：禁用wheelPropagation配置 #

这是最直接的方法，利用组件自带的配置项阻止事件冒泡。只需要给内部的perfect-scrollbar标签添加[wheelPropagation]="false"属性即可：

<!-- 页面级的perfect-scrollbar -->
<perfect-scrollbar>
  <div class="page-container">
    <!-- 内部固定高度的滚动区块 -->
    <perfect-scrollbar 
      [style.height.px]="400" 
      [wheelPropagation]="false">
      <mat-card>some contents...</mat-card>
      <mat-card>更多测试内容，确保滚动高度超过区块高度...</mat-card>
    </perfect-scrollbar>
  </div>
</perfect-scrollbar>

原理：wheelPropagation默认值为true，开启时会在滚动到边界时把事件传递给父元素；设为false后，事件会被拦截，不会触发页面级的滚动。

方案2：手动监听边界事件并阻止默认行为 #

如果方案1在某些特殊场景（比如模拟触屏的touch事件）下不生效，可以尝试手动监听滚动边界事件，阻止浏览器的默认滚动行为：

步骤1：在模板中绑定事件 #

给内部滚动条添加滚动边界监听和滚轮/触摸事件：

<perfect-scrollbar 
  [style.height.px]="400"
  (ps-y-reach-start)="onScrollToTop()"
  (ps-y-reach-end)="onScrollToBottom()"
  (wheel)="handleWheel($event)"
  (touchmove)="handleTouchMove($event)">
  <mat-card>some contents...</mat-card>
  <mat-card>更多测试内容...</mat-card>
</perfect-scrollbar>

步骤2：在组件TS文件中处理事件 #

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  private isAtScrollBoundary = false;
  private lastTouchY: number | null = null;

  // 标记滚动到顶部/底部的状态
  onScrollToTop() {
    this.isAtScrollBoundary = true;
  }

  onScrollToBottom() {
    this.isAtScrollBoundary = true;
  }

  // 处理滚轮事件
  handleWheel(event: WheelEvent) {
    if (this.isAtScrollBoundary) {
      event.preventDefault();
      this.isAtScrollBoundary = false; // 重置状态，避免影响后续正常滚动
    }
  }

  // 处理触屏滚动事件（模拟触屏场景）
  handleTouchMove(event: TouchEvent) {
    if (!this.isAtScrollBoundary) return;

    const touch = event.touches[0];
    if (this.lastTouchY) {
      const deltaY = this.lastTouchY - touch.clientY;
      // 判断滚动方向是否会触发页面滚动，是的话阻止默认行为
      if ((deltaY < 0 && this.isAtScrollBoundary) || (deltaY > 0 && this.isAtScrollBoundary)) {
        event.preventDefault();
      }
    }
    this.lastTouchY = touch.clientY;
    this.isAtScrollBoundary = false;
  }
}

原理：通过ps-y-reach-start和ps-y-reach-end事件监听滚动边界状态，当触发时阻止滚轮或触摸事件的默认行为，避免页面滚动条被激活。

优先推荐方案1，因为它是组件原生支持的配置，代码更简洁，兼容性也更好。如果还是有问题，再尝试方案2的手动事件拦截。

内容的提问来源于stack exchange，提问作者gaurav bhavsar