PrimeNG Table：虚拟滚动+冻结列无法向上滚动问题

问题说明 #

当PrimeNG Table同时启用虚拟滚动和1列及以上冻结列时，若数据行数超过36，滚动至底部后会出现无法向上滚动、滚动条上下跳动且始终停留在最后一行的异常；行数≤35时功能正常。

临时规避方法 #

1. 强制指定虚拟滚动行高与容器高度 #

明确设置virtualRowHeight和固定的scrollHeight，避免虚拟滚动计算时的高度偏差：

<p-table 
  [value]="data" 
  [scrollable]="true" 
  scrollHeight="600px" 
  [virtualScroll]="true" 
  [virtualRowHeight]="50" 
  frozenColumns="1"
>
  <!-- 列定义内容 -->
</p-table>

注：virtualRowHeight值需与实际行高匹配，可根据UI调整数值。

2. 手动指定冻结列固定宽度 #

禁用冻结列的自动宽度计算，设置固定宽度避免容器尺寸波动导致的滚动计算错误：

<ng-template pTemplate="header">
  <tr>
    <th style="width: 160px;" frozen>固定宽度冻结列</th>
    <!-- 其他非冻结列定义 -->
  </tr>
</ng-template>

同时建议给非冻结列也设置合理的宽度规则，减少布局变动。

3. 回退到无问题的PrimeNG版本 #

若项目依赖允许，可暂时降级到PrimeNG 15.x及更早的稳定版本（该bug为特定版本引入，旧版本未触发此异常）。

4. 自定义滚动事件修正位置 #

通过监听滚动事件，手动修正滚动位置，避免被强制拉回底部：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('virtualTable') virtualTable: Table;

  handleScroll(event: Event) {
    const scrollEl = event.target as HTMLElement;
    // 接近底部时手动锁定滚动位置，防止强制回滚
    if (scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 15) {
      this.virtualTable.virtualScrollerService.updateScrollPosition(scrollEl.scrollTop);
    }
  }
}

模板中绑定滚动事件：

<p-table 
  #virtualTable
  [value]="data" 
  [scrollable]="true" 
  [virtualScroll]="true" 
  frozenColumns="1"
  (scroll)="handleScroll($event)"
>
  <!-- 列定义内容 -->
</p-table>

说明 #

以上方法为临时规避方案，该问题已在PrimeNG官方仓库提交Issue，等待官方正式修复。

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