virtual-scroll-viewport 虚拟滚动

<virtual-scroll-viewport #viewport [list]="list" [itemSize]="30" style="height: 300px;">
  <ul>
    <li class="item" *ngFor="let item of viewport.vList" style="height: 30px;">{{item}}</li>
  </ul>
</virtual-scroll-viewport>

<virtual-scroll-viewport (scroll)="updateVList()">
  <div class="virtual-scroll-content-wrapper" #wrapper style="margin-top: {{marginTop}}px;">
    <ng-content></ng-content>
  </div>
  <div class="virtual-scroll-content-spacer" [style.height.px]="totalHeight"></div>
</virtual-scroll-viewport>

// 滚动事件
updateVList() {
  // 标识是否需要更新
  needUpdate = false;
  if (内容向上滚动) {
    needUpdate = bottomBuffer(底部缓冲区) < minBuffer;
  } else {
    needUpdate = topBuffer(顶部缓冲区) < minBuffer;
  }
  if (!needUpdate) return;

  // 切割出需要展示的内容
  start = Math.max(scrollTop - maxBuffer, 0) / this.itemSize;
  end = (scrollTop + viewportClientHeight + maxBuffer) / this.itemSize;
  this.vList = this.list.slice(start, end);
  // 设置视口内容偏移
  this.marginTop = start * this.itemSize;
}