Отсутствующие данные дерева с виртуальной прокруткой с высотой гибкости для angular-tree-component

Question

Я пытаюсь использовать высоту гибкости для дерева с виртуальной прокруткой. Однако, когда я установил контейнер дерева на100% и установите высоту гибкости, фрагмент данных отсутствует на экране во время прокрутки.

Я добавил сюда рабочий пример https://stackblitz.com/edit/angular-d2mavw

Если я открою последний узел rootDynamic49, будут видны только 20 дочерних узлов. Однако в нем 50 детей. С другой стороны, когда я установил высоту на100px, все дети видны.

Есть ли способ, по которому я могу зафиксировать первый div в верхней позиции и добавить прокрутку только для дерева с гибкой высотой?

Answer 1

Когда вы используете height: 100%;и разверните дерево, высота области просмотра виртуального свитка не обновляется до новой высоты дерева. Он остается на этомpxценность. Мы можем полностью опустить этот CSS и установитьheight в 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; на tree-container чтобы он уместился в основном div.

angular-tree.component.css

.tree-container {
    display: inline;
}

Запись: я использовал22.4 для nodeHeight так как при осмотре узлов высота ровно 22.4px.

Вот рабочий пример на StackBlitz. Вот превью того же.