如何在mat-table滚动结束时触发事件？已尝试方案未生效

常见错误点及修复方案 #

1. 滚动容器未正确配置
   你绑定scroll事件的外层div必须满足两个条件才会产生滚动条并触发事件：

   • 设置固定高度（比如height: 400px），否则div会被内容完全撑开，不会出现滚动
   • 设置overflow: auto，让内容超出时显示滚动条

   示例CSS：

   .table-wrapper {
     height: 450px;
     overflow-y: auto;
   }
   

2. 绑定对象错误

   • 若使用普通Mat-Table，确保scroll事件绑定在直接包裹mat-table的带滚动样式的div上，而非mat-table本身：

     <div class="table-wrapper" (scroll)="onScroll($event)">
       <mat-table [dataSource]="yourDataSource">
         <!-- 列定义 -->
       </mat-table>
     </div>
     

   • 若使用虚拟滚动（cdk-virtual-scroll-viewport），需将scroll事件绑定在cdk-virtual-scroll-viewport元素上，而非外层div：

     <cdk-virtual-scroll-viewport itemSize="60" (scroll)="onScroll($event)">
       <mat-table [dataSource]="yourDataSource">
         <!-- 列定义 -->
       </mat-table>
     </cdk-virtual-scroll-viewport>
     

3. @HostListener('window:scroll')无效的原因
   Mat-Table的滚动是容器内的局部滚动，并非整个窗口的滚动，所以监听window的scroll事件自然不会触发。只有当整个页面内容超出窗口高度产生滚动时，这个事件才会生效，显然不符合你的需求。

滚动结束/触底判断示例 #

如果需要在滚动到底部时触发事件，可以在onScroll方法中加入判断逻辑：

onScroll(event: Event): void {
  const container = event.target as HTMLElement;
  // 判断是否滚动到底部（+1是为了兼容浏览器精度差异）
  const isScrolledToBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 1;
  if (isScrolledToBottom) {
    // 执行你的业务逻辑
    console.log('已滚动至表格底部');
  }
}

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