如何使用 Angular Material CDK 将非列表项放入虚拟滚动中答案

【问题标题】：How to fit non-list items into virtual scroll using Angular Material CDK如何使用 Angular Material CDK 将非列表项放入虚拟滚动中
【发布时间】：2022-12-09 07:46:10
【问题描述】：

我目前正在尝试理解虚拟滚动的概念，为此我广泛使用了 Angular CDK 上的 Angular 文档。我发现他们实现了虚拟滚动，但没有展示如何在页面上实现列表。

为了让您更好地理解我的问题：考虑构建状态集合的页面。您有一个很大的标题部分，然后是州列表，最后是带有建议的页脚。

我试图做的是将所有这 3 个部分放入虚拟滚动视口中，以使整个页面可滚动，而不仅仅是列表本身。这就是问题所在。滚动确实按预期工作，但列表中的某些项目提前分离，因此标题部分有时会反弹回来。这会导致非常糟糕的用户体验，我想知道我的方法是否以某种方式朝着正确的方向发展。我在Stackblitz 上创建了该问题的简短演示。我希望这可能有助于理解问题。访问链接时，尝试滚动内容。您应该注意到标题部分经常重新出现在顶部，因为项目被删除得太快了。

我希望我能给你一个关于问题到底是什么的想法。如果你们中的一些人可以帮助我解决这个问题或者给我一些关于如何更好地实现这种行为的提示，那就太好了。

祝你有美好的一天 & 提前谢谢你！

【问题讨论】：

看看Scrolling over fixed sized items。我相信 minBufferPx 和 maxBufferPx 属性可以帮助您解决这个问题。

标签： angular angular-cdk virtualscroll angular-cdk-virtual-scroll

【解决方案1】：

您想阅读文档的 this 部分。长话短说 - 您为视口提供不同高度（页眉和页脚）的项目，这是不受支持的 - 所有项目都需要具有相同的高度。 @angular/cdk-experimental 中提到的 autosize 策略有很多问题，并且没有被积极开发。虽然它可能适用于您的简单示例，所以请尝试一下 - 但如果您遇到一些问题，请不要指望您会得到修复。

您最好的选择是创建您自己的 VirtualScrollStrategy 的自定义实现来满足您的所有要求，或者，如果您觉得自己不能胜任这项任务，请使用 CDK 之外的一些自定义库。有多种不同的虚拟滚动库应该适合您。

如果您希望您的用例随着时间的推移变得更加复杂，您甚至可以考虑从头开始自己实现整个事情。举个例子——在我的例子中，事实证明我们需要支持不同大小的项目，当用户与它们交互时它们可以改变它们的大小，并且它们的大小在它们被渲染并且一些事件被渲染之后才能确定发射，以及一些更棘手的部分。那时（2 年前）没有库会提供这种开箱即用的功能，而且实际上从头开始编写一些东西来满足我们的确切要求会更快。

【讨论】：

谢谢您的回答。事实证明，正如 @octavian-mărculescu 提到的那样，修复正在调整 min 和 maxBufferPx。现在我将使用他的解决方案，直到我有时间实施我自己的策略

【解决方案2】：

我正在寻找类似问题的解决方案。你找到解决办法了吗？

【讨论】：