Angular中如何监听mat-list组件的滚动事件？

要监听用户对<mat-list>的滚动行为，可按以下步骤实现：

1. 确保列表可滚动 #

首先给你的.syslog__list类添加CSS样式，让列表具备滚动能力：

.syslog__list {
  max-height: 500px; /* 根据业务需求设置合适的最大高度 */
  overflow-y: auto; /* 开启垂直滚动 */
}

2. 在组件中监听滚动事件 #

利用Angular的生命周期钩子和ElementRef获取列表的原生DOM元素，添加滚动事件监听：

import { Component, ViewChild, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 通过read选项直接获取列表的原生DOM元素引用
  @ViewChild('wholeList', { read: ElementRef }) wholeList!: ElementRef<HTMLElement>;
  private scrollHandler?: () => void;

  ngAfterViewInit(): void {
    const listElement = this.wholeList.nativeElement;
    // 绑定this上下文，避免回调中this指向异常
    this.scrollHandler = this.handleListScroll.bind(this);
    listElement.addEventListener('scroll', this.scrollHandler);
  }

  // 滚动事件处理函数
  handleListScroll(event: Event): void {
    const scrollElement = event.target as HTMLElement;
    
    // 获取滚动相关参数
    const scrollTop = scrollElement.scrollTop;
    const totalHeight = scrollElement.scrollHeight;
    const visibleHeight = scrollElement.clientHeight;

    // 示例：检测是否滚动至底部（5px容差避免精度问题）
    const isAtBottom = scrollTop + visibleHeight >= totalHeight - 5;
    if (isAtBottom) {
      console.log('列表已滚动到底部');
      // 这里可添加加载更多数据等逻辑
    }

    // 其他滚动相关逻辑，比如根据滚动位置高亮元素、显示回到顶部按钮等
  }

  // 组件销毁时移除事件监听，防止内存泄漏
  ngOnDestroy(): void {
    if (this.scrollHandler) {
      this.wholeList.nativeElement.removeEventListener('scroll', this.scrollHandler);
    }
  }
}

关键注意事项 #

• 避免直接访问组件的私有属性（如_elementRef），使用{ read: ElementRef }是更安全的方式。
• 必须在组件销毁时移除滚动监听，防止内存泄漏。
• 如果滚动容器不是<mat-list>本身（比如滚动是在父级容器上），需要将事件监听添加到对应的父容器元素上。

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