问题标签 [angular-cdk-virtual-scroll]

使用cdk虚拟视口时，需要设置视口的高度

但是如果 cdk-virtual-scroll-viewport 没有达到最大高度以显示滚动条，我希望 cdk-virtual-scroll-viewport 能够包装内容项。但是视口不适用于最大高度。

如果没有水平滚动条，那么视口设置高度为最大高度就可以了。但是在我当前的设计 UI 中，我需要显示水平滚动条，因为有很多内容列，如下图所示。

然后由于视口的高度，滚动条远低于。行项目会随时间增加，但在项目增加到最大高度之前，我希望水平滚动条环绕到内容高度，但目前似乎无法实现。

我不使用 mat-table 的原因是我想支持无限滚动并渲染适合屏幕的项目。Mat-table 不支持这一点，如果我继续向下滚动并请求数据，则模板中的行项目会增加并影响性能。

有人有更好的建议吗？

非常感谢。

使用 Angular CDK 虚拟滚动渲染巨大列表时遇到问题。需要将 itemsize 设置为 1 才能正确加载列表。

预计根据视口大小加载列表。但它的负载远远超过视口大小。视口大小为 20 个项目，它将一次加载超过 200 个项目。

例子：

https://ionic-angular-v5-virtual-scroll-issue-cdk.stackblitz.io

该代码使用 Ionic 5 + Angular。不使用 Ion-virtual-scroll 的原因是参考了团队的建议。 https://github.com/ionic-team/ionic-framework/issues/22792

我正在使用 Angular 的cdk-virtual-scroll-viewport. 除了订阅视图位置之外，该功能不依赖于它的任何特殊内容，以便在用户滚动到底部时（在自定义中DataSource<Item>）加载新元素：

当所有项目具有相同的高度（在css和itemSize.与FixedSizeVirtualScrollStrategy配合得很好，所以我尝试使用from （它使用AutoSizeVirtualScrollStrategy）。但是，使用动态策略，一旦将新元素添加到备份虚拟滚动的数据源，滚动位置就会闪烁（我假设是因为）。<cdk-virtual-scroll-viewport>100px50pxautosizecdl-experimentalItemAverager

有没有可行的方法来实现这两种策略的混合？我知道列表中每个项目的类型，因此它的高度，所以应该可以对显示的内容和要加载的内容进行精确计算？当然，对于大型集合，它可能不会那么高效。

我有一个包含大约 1000 列的材料表，我想虚拟化这些列，有很多示例显示使用 cdk-virtual-scroll 对行进行虚拟化，但不适用于列。有没有办法对列进行虚拟化。

我正在为列表创建一个新项目，并希望在保存后滚动到它。目前它滚动但 5 个项目太短（即我必须手动向下滚动另外 5 个项目才能看到我的项目） 我玩过 setRenderedContentOffset 但这似乎没有什么区别。在滚动到该项目后，我很乐意以编程方式再滚动 500 像素，但我似乎也无法让它工作。

我怎样才能让它滚动那些额外的 500px？

编辑：

我用过this.virtualScrollViewport.measureScrollOffset('bottom');，它说视口在底部。

我什至尝试在滚动到索引后使用 vanilla javascript 将其滚动额外的 500 像素，但这也不起作用

所以我猜我需要锻炼为什么容器的高度不正确并且没有正确计算项目。

编辑2：

因此，经过几个小时之后，最初忽略了这个 SO 答案，因为我想让它按照文档规定的方式工作使用 cdk-virtual-scroll (Angular 8) 滚动到底部

我已经使用超时解决方法两次调用底部，现在它可以工作了。

我正在使用 Angular Material Virtual 滚动，项目被正确加载到 DOM 中，但是在滚动时它会跳来跳去并自动跳到最后。

如果发生故障，则滚动方法的输出如下：

如果发生这种情况，它会自动滚动到虚拟滚动的末尾。

我已经为手风琴添加了虚拟滚动。在手风琴内部，我有带有页码的图像。

在搜索框中输入值后，我想滚动到页码所在的位置。

我尝试scrollToView以javascript方式添加。但是由于所有页面不是在虚拟滚动到 DOM 中同时呈现的，所以这个逻辑不起作用。有没有其他方法可以滚动到搜索的页面。请注意，页面不是按升序排列的，并且顺序可能会有所不同。

此视口位于父组件中。Accordion 存在于另一个子组件中。

我在将 cdk 拖放功能与 cdkScrollable 容器一起使用时遇到问题，该容器包含在带有元素的encapsulation: ViewEncapsulation.ShadowDom元素中。

当被拖动元素导致列表滚动时，滚动偏移量不会添加到被拖动元素定位中。

wrapper.component.html

app.component.html

app.component.css

现在，当我注释掉<wrapper></wrapper>一切都按预期工作。拖动cdkDrag滚动时效果很好。

有没有什么办法解决这一问题？正如我在它中看到的那样，ScrollDispatcher它注入DOCUMENT并将其用作滚动计算的根。这可能是问题的根源吗？

我的角度应用程序中有以下情况。

案子 ：

我有一个自定义输入select，它基本上做了一些样式和逻辑，并绘制了一个输入列表：

（简化）：

在应用程序选择模板中我只是做

简单的前：https ://stackblitz.com/edit/angular-pwdm7r?file=src/app/app.component.ts

问题 ：

现在，我想*ngFor用最少的代码做一个几乎可以滚动的东西。

一种方法是每次我想使用虚拟滚动时都这样做。

但我试图做的解决方案是cdk-virtual-scroll-viewport在我的选择器组件中写一个

像这样 => https://stackblitz.com/edit/angular-fuw1fu?file=src/app/app.component.html

NullInjectorError：没有 CdkVirtualScrollViewport 的提供者！

因此，我尝试ng-content仅在存在 cdkVirtualFor 时阅读并附加内容。

https://stackblitz.com/edit/angular-ax3yvu?file=src/app/select/select.component.ts

但我一直收到同样的错误。

有没有办法做到这一点？

我尝试实现一个包含 Angular 材质扩展面板列表的 Sidenav。当我使用 ngFor 指令时，布局看起来很好，就像我想要的那样。正如您在图像中看到的，它将视图扩展为扩展面板内容宽度的 100%。 使用 ngFor-directive 布局。
Stackblitz 使用 ng-For-directive 的外观： https ://stackblitz.com/edit/angular-ivy-fwav88?file=src/app/app.component.ts

由于列表中可能会有数千个项目，我想使用 CDK 虚拟滚动来提高性能。

但是使用它，我无法将列表的宽度设置为 100%。相反，有一个水平滚动条。

虚拟滚动的外观。

带有虚拟滚动的代码堆栈闪电战：https ://stackblitz.com/edit/angular-ivy-xr5bok?​​file=src/app/sidenav/sidenav.component.html

我尝试使用 flexbox 和我知道的所有其他 CSS 技巧，但没有任何成功。

我将非常感谢您的帮助。

谢谢！