Javascript 如何提高角度列表的滚动速度？

我使用Angular 10，有两列布局，其中两列都包含一个包含数千个元素的

mat列表

项。滚动时，速度会急剧下降，因此我解决了以下问题：

• 简化CSS的影响
• 增加了

  transform:translateX（0）translateZ（0）到列（）

• 添加了对

  ngFor

  列表的支持
• 从HTML模板中删除了不必要的调用
• 添加了延迟显示行为，该行为仅在用户滚动到列表末尾时加载新元素

现在我有两个问题：

在两个组件（每列）中，我都添加了一个

HostListener（'mouseweel'）

，以实现这种“惰性显示行为”，如下所示：

@HostListener（'mousewheel'，['$event']））
滚动（事件：MouseEvent）{
clearTimeout（这个.scrollTimeout）；
this.scrollTimeout=setTimeout（（）=>{
如果到达列表的末尾，则加载更多元素（）；
}, 250);
}

似乎这个简单的函数也会将性能降低几FPS。Javascript是否有可以附加到最后一个元素的内置事件，因此不需要在Javascript内部显式检查。类似于

（onDisplay）=“加载更多元素（）”

我还缺少其他的改进吗

---

您可以使用此软件包构建无限滚动：
您可以通过本视频了解更多详细信息：

基本上，在模板中：

<div
  class="search-results"
  infiniteScroll
  [infiniteScrollDistance]="2"
  [infiniteScrollThrottle]="50"
  (scrolled)="onScroll()"
></div>

---

每当你滚动时，

onScroll

就会被执行

看看angular material SDK-virtualscroll指令。那么在@RyanWilson上，mat list不是用于“list”吗？这不是业务需求，因此我可以自由更新视图。mat list真的那么慢吗？@MikeOne谢谢，我会调查的！这就是我的意思，这不是任何要求。我可以在这方面做任何改变。只要我在结尾有一个列表：-）@DanielStephens，那么我建议使用过滤列表，（）对我来说，我不想通过滚动数千个选项来查找我要查找的内容。非常感谢您的帮助！不幸的是，我不需要一个无限长的卷轴，但看起来不错