angular-tree-component 的弹性高度虚拟滚动缺少树数据

Question

我正在尝试为具有虚拟滚动的树使用弹性高度。但是，当我将树容器设置为 100% 并设置 flex 高度时，滚动期间屏幕上的数据块丢失了。

我在这里添加了工作示例https://stackblitz.com/edit/angular-d2mavw

如果我打开最后一个 rootDynamic49 节点，只有 20 children 是可见的。但是，它有 50 children。另一方面，当我将高度设置为 100px 时，所有 children 都可见。

有没有办法让第一个 div 固定在顶部位置，并只为具有灵活高度的树添加滚动条？

Answer 1

当您使用 height: 100%; 并展开树时，虚拟滚动的视口高度不会更新为树的新高度。它保持在 px 值。我们可以完全省略这个 css 并在 container 中设置 height 代替，使用 display: grid;

app.component.css

.container {
    border: 1px solid black;
    display: grid;
    grid-template-rows: auto calc(100vh - 38.4px); // StackBlitz adds 8px padding to body and 'First div' has a height of 22.4px (8 + 8 + 22.4 = 38.4px).
}

calc(100vh - 38.4px)需要换成你想要的身高。在这里使用 % 值似乎与您在 OP 中提到的关于 'First div' 固定在顶部位置的内容有悖常理，因为如果 div 被赋予 100% 它将按照它的内容和整个 div 会滚出视野。

然后您需要做的就是在 tree-container 上使用 display: inline; 使其适合主 div.

angular-tree.component.css

.tree-container {
    display: inline;
}

注意：我使用 22.4 作为 nodeHeight 因为在检查节点时，高度正好是 22.4px。

这是一个关于 StackBlitz. Here's a preview 的工作示例。

angular-tree-component 的弹性高度虚拟滚动缺少树数据

Missing tree data with virtual scroll with flex height for angular-tree-component

tree

angular

angular-tree-component