4

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

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

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

有没有一种方法可以将第一个 div 固定在顶部位置并仅为具有灵活高度的树添加滚动？

4

1 回答 1

2

当您使用height: 100%;并展开树时，虚拟滚动的视口高度不会更新到树的新高度。它保持它的px价值。我们可以完全省略这个 cssheight并container使用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 中提到的关于将“第一个 div”固定在顶部位置的内容违反直觉，因为如果div给出100%它，它将根据其内容拉伸，并且整体div将滚动到视野之外。

然后，您需要做的就是使用display: inline;on 以tree-container使其适合 main div。

角树.component.css

.tree-container {
    display: inline;
}

注意：我在检查节点时使用22.4了nodeHeight，高度正好是22.4px.

这是StackBlitz上的一个工作示例。这是相同的预览。

于 2019-09-27T06:22:02.730 回答