Angular Material全屏侧边栏容器搭配ngx-infinite-scroll滚动失效求助

我之前在做Angular Material项目时正好碰到过一模一样的问题！核心原因是ngx-infinite-scroll默认监听的是window的滚动事件，但当你把mat-sidenav-container设为全屏后，实际的滚动区域是它内部的mat-sidenav-content元素，而不是整个浏览器窗口，所以滚动事件根本没被指令捕获到。

下面是经过验证的解决方案，分步骤拆解：

1. 让ngx-infinite-scroll监听正确的滚动容器 #

首先要告诉指令不要监听window，而是监听mat-sidenav-content这个实际滚动的元素：

• 给mat-sidenav-content添加模板引用变量（比如#scrollContainer）
• 在ngx-infinite-scroll指令中设置[scrollWindow]="false"，并通过[infiniteScrollContainer]指定滚动容器

2. 调整全屏容器的样式（关键） #

避免height:100vh或position:absolute带来的高度计算异常，推荐用position:fixed来锁定全屏，这样容器的高度不会受父元素影响：

mat-sidenav-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

mat-sidenav-content {
  height: 100%;
  overflow-y: auto; /* 确保内容超出时能滚动 */
}

3. 完整代码示例 #

组件模板

<mat-sidenav-container class="full-screen-container">
  <mat-sidenav mode="side" opened>
    <!-- 侧边栏内容 -->
    <p>侧边栏菜单</p>
  </mat-sidenav>

  <mat-sidenav-content #scrollContainer>
    <div class="table-wrapper"
         infiniteScroll
         [scrollWindow]="false"
         [infiniteScrollContainer]="scrollContainer.nativeElement"
         (scrolled)="loadMoreData()">
      
      <table mat-table [dataSource]="dataSource">
        <!-- 列定义 -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef>ID</th>
          <td mat-cell *matCellDef="let item">{{item.id}}</td>
        </ng-container>
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>名称</th>
          <td mat-cell *matCellDef="let item">{{item.name}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

      <!-- 加载状态提示 -->
      <div *ngIf="isLoading" class="loading-text">加载中...</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

组件类

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-scroll-table',
  templateUrl: './scroll-table.component.html',
  styleUrls: ['./scroll-table.component.css']
})
export class ScrollTableComponent {
  displayedColumns: string[] = ['id', 'name'];
  dataSource = new MatTableDataSource<any>([]);
  isLoading = false;
  currentPage = 1;

  @ViewChild('scrollContainer') scrollContainer!: ElementRef;

  ngOnInit() {
    // 加载初始数据
    this.loadInitialData();
  }

  loadInitialData() {
    this.isLoading = true;
    // 模拟异步请求
    setTimeout(() => {
      const initialData = Array.from({length: 20}, (_, i) => ({
        id: i + 1,
        name: `数据项 ${i + 1}`
      }));
      this.dataSource.data = initialData;
      this.isLoading = false;
    }, 800);
  }

  loadMoreData() {
    if (this.isLoading) return; // 避免重复请求
    this.isLoading = true;
    this.currentPage++;

    // 模拟分页加载
    setTimeout(() => {
      const newData = Array.from({length: 20}, (_, i) => ({
        id: (this.currentPage - 1) * 20 + i + 1,
        name: `数据项 ${(this.currentPage - 1) * 20 + i + 1}`
      }));
      this.dataSource.data = [...this.dataSource.data, ...newData];
      this.isLoading = false;
    }, 800);
  }
}

样式文件

.full-screen-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

mat-sidenav-content {
  height: 100%;
  overflow-y: auto;
}

.table-wrapper {
  padding: 16px;
  min-height: 100%;
}

.loading-text {
  text-align: center;
  padding: 16px;
  color: #666;
}

额外注意事项 #

• 不要同时给mat-sidenav-container设置height:100vh和position:absolute，容易导致滚动条重复出现
• 用浏览器开发者工具检查mat-sidenav-content的实际高度，确认没有被padding/margin撑开导致高度溢出
• 确保ngx-infinite-scroll的版本与你的Angular版本兼容（比如Angular 16+对应ngx-infinite-scroll 16.x版本）

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