问题标签 [angular-cdk-virtual-scroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 如何修复 Angular 9 应用程序中的 CDK 虚拟滚动。[PokeDex 应用程序]
在这里，首先你可以在没有虚拟滚动的情况下检查应用程序的当前状态：
滚动非常流畅，但正如您所见，搜索和来回导航有点慢，因为需要重新加载 DOM。它不是很慢的搜索逻辑，因为我只是使用一个简单的管道来过滤仅基于口袋妖怪名称和 ID 的口袋妖怪列表。我已经测试并发现罪魁祸首是 DOM 中元素的疯狂数量。（每个口袋妖怪物品中都有嵌套的 Divs）
没有虚拟滚动的口袋妖怪列表组件：
所以现在我正在尝试实现虚拟滚动以提高性能，但发生了这种情况：
- 滚动时列表关闭很多。（感觉不像正常滚动）。
- 口袋妖怪图像受到干扰（随机/随机）。
- 图像甚至不是静态的，单个口袋妖怪的图像在上下滚动时会发生变化。
- 我也想保留以前的网格外观。
修改了带有虚拟滚动的口袋妖怪列表组件。
angular - 角料表检测滚动
我正在使用 Angular Material Table 并想检测用户何时滚动表格。为此，我正在使用cdkScrollable.
app-my-component：
app-my-component当它是根应用程序组件的一部分时，这可以正常工作。
app-my-component但是当在里面时它不起作用mat-tab。
表格的高度app-my-component限制为垫子的高度。因此滚动条出现在 mat-tab 内。
我怎样才能让它在app-my-component里面工作mat-tab？
angular - Angular 9 CDK 无限滚动使用 scrolledIndexChange 加载更多数据
我正在尝试使用 cdk 的虚拟滚动组件执行无限滚动，但没有取得任何成功。
我正在使用scrolledIndexChange在索引更改时加载更多数据，但该索引是恒定的。指数值不变
先感谢您
.html
.ts
primeng - primeng p-virtualScroller 空列表项和滚动条问题
我正在使用primeng p-virtualScroller来实现使用滚动条加载数据。它工作正常。但我面临以下问题：当搜索结果较少时，它会显示滚动条和空列表项。下面是我在 Html 中使用的代码：
下面是我要解释的问题（见屏幕截图）
angular - 覆盖滚动条样式的角度虚拟滚动性能问题
我cdk-virtual-scroll-viewport用来应用虚拟滚动。不幸的是，在将样式应用到滚动条后，滚动不再流畅。原生（右侧）滚动条闪烁，但移动得更顺畅。在 Chrome 上测试。
https://stackblitz.com/edit/angular-jkw9ac-dpnnaw
html - CDK 虚拟卷轴没有 dom
我正在使用 CDK 虚拟滚动来提高包含大量数据的下拉菜单的性能。我已按照文档执行了所有步骤。但是当我打开下拉列表时，我在 cdk-virtual-scroll-viewport 组件中看不到任何 dom。
这是来自 HTML 的代码。
如果我将 div 移到 cdk 虚拟滚动之外并用 ngFor 替换它，它工作正常。知道可能是什么问题吗？
javascript - Angular CDKScrollable 未触发
创建我自己的 div 时，我似乎无法触发有角度的 CdkScrollable：
https://stackblitz.com/edit/angular-9-material-starter-ykpx6o?file=src%2Fapp%2Fapp.component.ts
angular - 如何使用角度 cdk 虚拟滚动一次滚动两个列表？
我想做这样的事情：
并让g和div元素同时滚动（它们都具有相同的高度）。这可能吗？完全按照我在此处概述的操作会导致错误：Error: CdkVirtualScrollViewport is already attached.
angular - 使用 CdkVirtualFor 和 templateCacheSize 进行排序
我在 Angular 的一个列表上实现了CdkVirtualForOf，并将其 templateCacheSize 设置为 150 以提高性能。
但是当我对数据进行排序并滚动时，缓存的模板会破坏视图中的项目。换句话说：我对数据进行排序，并且列表正确更新。然后我向下滚动，但是当我再次向上滚动时，列表中的条目不正确，因为模板缓存。
这个“问题”在 GitHub 上报告。
我尝试禁用模板缓存，这消除了问题，但是使列表执行得非常糟糕，几乎无法使用。
所以...
我该如何处理？有没有办法刷新 cdkVirtualFor 模板缓存？还是有另一种方法可以使用 cdkVirtualFor 进行排序？
我尝试做一个最小的复制，但是虽然我激活了模板缓存，但它没有运行。我把它留在这里供参考，或者如果有人可以告诉我如何让我的复制工作。
https://stackblitz.com/edit/angular-ivy-wzfnem?file=src%2Fapp%2Fapp.component.html
angular - 如何重做 cdk-virtual-scroll-viewport 虚拟滚动组件
滚动页面时无法在移动浏览器中隐藏地址栏的问题
为什么它不起作用 当页面大小大于视口时，在移动浏览器中隐藏地址栏会在滚动时触发，这是标准浏览器行为。目前，应用程序是这样构建的：页面大小等于视口大小（屏幕大小），所以页面没有滚动 => 页面不滚动 => 隐藏地址栏不起作用
我看到什么解决方案 调整页面大小以适应功能区（cdk-virtual-scroll-viewport）。删除提要中的滚动。滚动页面时，模拟滚动功能区时调用的事件 (cdk-virtual-scroll-viewport)
这不起作用 我无法模拟滚动磁带时触发的事件