angular虚拟滚动

方案：采用cdk-virtual-scroll-viewport和ng-zorro的Timeline时间轴组件结合

方案2: 监听overflow元素scroll事件

onScroll(event) {
  console.log('滚动');
  const target = event.target as HTMLElement;
  if (target.scrollHeight - target.scrollTop === target.clientHeight) {
    console.log('到底了');
    // this.loadMoreData();
  }
}

实现原理

scrollHeight：元素内容的总高度，包括由于滚动而看不见的部分。

scrollTop：元素当前垂直滚动的像素值。

clientHeight：元素的可视区域高度，即元素在浏览器窗口中可见部分的高度。

当 target.scrollHeight - target.scrollTop === target.clientHeight 时，意味着元素已经滚动到了底部。因为 scrollHeight 是内容的总高度，scrollTop 是当前滚动的位置，clientHeight 是可视区域的高度。当 scrollTop 加上 clientHeight 等于 scrollHeight 时，说明已经滚动到了内容的底部。