问题标签 [virtualscroll]

我有一个问题列表，应该以编程方式呈现，不幸的是动态高度。为了提高性能并摆脱滞后，我正在使用ionic virtual scroll。问题是我必须实现跳跃功能，但由于目标元素尚未呈现但它无法找到该元素，因此无法滚动到该元素！我还测试了 ngx-virtual-scroller，它可以滚动到目标完美地工作，但它不支持动态高度，如果我不指定项目高度，它就不能完美地工作。有没有人对这个问题有任何想法！？这要了我的命；D

考虑到我在第 3 个问题上，我必须滚动到第 80 个问题！

谢谢你

我在 Angular 7 中使用虚拟滚动。我创建了一个CdkVirtualScrollViewport并且我会为每个滚动事件添加一个侦听器。我的意思是我希望在该视口内滚动时收到通知。

我试图注入scrollDispatcher我的组件，但我看到它scrolled()是在整个组件上滚动时触发的，然后我发现它是绑定到组件而不是绑定到CdkVirtualScrollViewport.

这是我的代码：

如您所见CdkVirtualScrollViewport，我的组件中有一个子元素：

这是完整的代码：https ://stackblitz.com/edit/angular7-scroll-dispatcher

也许我可以使用...register()的方法，scrollDispatcher但我应该将 a 传递CdkScrollable给它，而不是我的CdkVirtualScrollViewport元素。

那么，我怎样才能只听我的虚拟滚动视口滚动事件呢？

我正在尝试一起实现ngx-virtual-scroll和ng2- dragula

这是我目前的Stackblitz更新：Stackblitz

问题如下：

[dragula]="myGroupId"要使 Dragula 工作，组声明和要拖动的项目之间必须没有 HTML 。

但是几乎所有的虚拟滚动器库，包括这个，都会在 div 中创建项目。这是包自动生成的。因此，我的完整 div 将是拖动山墙。

我想知道您是否有任何调整以使其正常工作？

我正在寻找具有以下功能的角度虚拟滚动包：1）水平虚拟滚动2）容器宽度和高度是可变的。3) 项目宽度设置为容器宽度的百分比。4) 在渲染过程中可以最小化项目。

Angular cdk 目前使用固定的 itemSize 来表示高度和宽度......这是一个应该如何呈现的示例：

有什么推荐吗？

cdk-virtual-scroll-viewport 是否有可用的事件来查找列表中的元素是否被渲染。例如，在滚动浏览下面类似的列表时，是否有办法识别特定的 li 是否呈现或一组新元素呈现到 DOM 中。

• 物品
• 物品
• 物品

我正在构建一个垂直滚动的日历。我正在加载最初的日子，但是当新的日子被添加到列表中时，它们不会被渲染。

我有一项BehaviorSubject更新日期的服务。我知道日期列表正在更新，但似乎没有检测到更改。

有关更多信息，StackBlitz 存储库是公开的https://stackblitz.com/edit/material-infinite-calendar

我正在为我的应用程序使用角度材料自动完成（版本 7）。我在<cdk-virtual-scroll-viewport>里面使用。除了我解决的许多问题之外，还有一个我不明白：

当我添加 max-height css 时，下拉菜单不显示，如果我添加高度，它将显示但高度固定。

这是我的代码的一部分：html：

ts：

CSS：

在虚拟滚动类中，我必须添加一个固定高度。当项目的高度小于 350px 时，它会创建一个空白区域。

这是小提琴：https ://stackblitz.com/edit/angular-fs4voi 。由于我对 Angular 完全陌生，并且我对自动完成进行了一些修改，因此也可能导致此问题。

非常感谢！

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本没有进行任何滚动。我的css错了吗？还是我忘记了控件上的某些设置？该项目位于此处。

在我的Angular应用程序中，我使用了 Angular cdk 中的Virtual Scroll。

这是我的组件的模板：

在我的组件类中，我有一个方法可以更改items赋予它新内容的数组。每次调用此方法时，数组的大小都会改变：

调用该方法后reload，项目数组被正确更新，并且视图反映了这一变化。但是，滚动不会回到顶部。

每次items更改数组时，我都希望虚拟滚动以重置顶部的滚动。

有没有办法在cdk-virtual-scroll-viewport水平方向激活鼠标滚动？

正如我们在 angular material 示例中看到的那样，您只能通过从滚动条拖动来滚动，但不能仅使用鼠标滚轮滚动。

https://material.angular.io/cdk/scrolling/overview

我的意图是在 Netflix 中创建一个带有图像的组件，并通过使用鼠标滚轮来滚动它们。

第二个问题是：有人有这方面的例子吗？

我想实现这样的目标：

https://codepen.io/CalvinMorett/post/incorporate-horizo​​ntal-scrolling-mousewheel