如何用ngx-virtual-scroller实现组件网格虚拟化并使用body滚动条

完全可以通过配置parentScroller属性实现需求，具体步骤如下：

1. 获取body元素引用
   在组件类中获取document.body作为父滚动容器：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  bodyScroller: HTMLElement;

  ngOnInit() {
    this.bodyScroller = document.body;
  }
}

2. 配置ngx-virtual-scroller模板
   移除虚拟滚动容器的固定高度设置，绑定parentScroller到body元素：

<ngx-virtual-scroller 
  [items]="cardItems"
  [parentScroller]="bodyScroller"
  class="card-grid-scroller"
>
  <ng-template let-card>
    <div class="card-item">
      <!-- 卡片内容 -->
      <h3>{{card.title}}</h3>
      <p>{{card.description}}</p>
    </div>
  </ng-template>
</ngx-virtual-scroller>

3. 调整CSS样式
   确保虚拟滚动容器自适应内容，同时保持网格布局：

.card-grid-scroller {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  height: auto !important; /* 覆盖默认固定高度 */
}

.card-item {
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

关键注意点 #

• 确保body元素未被其他父容器设置overflow: hidden，否则body滚动条无法正常显示
• 如果卡片高度不固定，可添加[approxItemSize]="300"（替换为卡片近似高度）来优化虚拟滚动的计算性能
• 移除虚拟滚动容器的任何固定高度/最大高度设置，让其完全自适应内容高度

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