如何判断Angular中PrimeNG p-table的垂直滚动条是否处于顶部？

要判断开启了scrollable的PrimeNG p-table垂直滚动条是否在顶部，可通过以下步骤实现：

1. 获取表格的滚动容器DOM元素 #

p-table开启滚动后，实际的滚动区域是类名为p-datatable-scrollable-body的内部div。通过ViewChild获取表格组件实例，再定位到该滚动容器。

2. 检查或监听滚动位置 #

通过滚动容器的scrollTop属性判断：当scrollTop值为0时，滚动条处于顶部位置。

代码示例 #

组件类中实现逻辑

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('tab') table!: Table;
  // 其他业务属性...

  // 主动检查滚动条是否在顶部
  checkScrollPosition(): boolean {
    const scrollBody = this.table.el.nativeElement.querySelector('.p-datatable-scrollable-body');
    return scrollBody ? scrollBody.scrollTop === 0 : false;
  }

  // 监听滚动事件，实时判断
  ngAfterViewInit(): void {
    const scrollBody = this.table.el.nativeElement.querySelector('.p-datatable-scrollable-body');
    if (scrollBody) {
      scrollBody.addEventListener('scroll', () => {
        const isAtTop = scrollBody.scrollTop === 0;
        // 根据判断结果执行后续操作，比如更新组件状态
        // 示例：this.isScrollTop = isAtTop;
      });
    }
  }
}

注意事项 #

• 建议在ngAfterViewInit钩子中操作DOM，确保表格已完成渲染，能正确获取滚动容器。
• 若表格带有loading状态，需在加载完成后再绑定滚动事件，避免DOM未就绪导致获取失败。

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