Angular Virtual Scroll прыгает вокруг

Я использую виртуальную прокрутку Angular Material, элементы правильно загружаются в DOM, но при прокрутке случается, что он прыгает и автоматически переходит в конец.

<cdk-virtual-scroll-viewport #scrollViewport  (scrolledIndexChange)="scrolled($event)" [itemSize]="ITEM_SIZE"  class="my-virtual" >
    <div *cdkVirtualFor="let elem of elemtArray;" class="input-field-container ">

        <div class="my-style" >{{elem}} </div>

    </div>
</cdk-virtual-scroll-viewport>

Вывод прокручиваемого метода следующий, если происходит сбой:

Scrolled:  105
Scrolled:  115
Scrolled:  106
Scrolled:  117
Scrolled:  109
Scrolled:  119
Scrolled:  110
Scrolled:  121

В этом случае он автоматически прокручивается до конца виртуальной прокрутки.


angular scrollview angular-material angular-cdk-virtual-scroll
person Elrond    schedule 11.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Виртуальная прокрутка полагается на вычисляемую высоту элемента для вычисления смещений. Чтобы контролировать это, установите входной itemSize of cdk-virtual-scroll-viewport на любую высоту, которую вы ожидаете от ваших элементов (в пикселях).

если ваш ITEM_SIZE не соответствует фактическому размеру элемента, то будет происходить описанное вами поведение.

пример:

css:

.my-style {
    height: 42px;
}

html:

<cdk-virtual-scroll-viewport [itemSize]="42" [...]>
     <!-- ... --->
</cdk-virtual-scroll-viewport>
person Mr.Manhattan    schedule 11.05.2021
comment
спасибо за ваш ответ, моя проблема заключалась в том, что я использовал какой-то особый стиль внутри моего виртуального свитка - person Elrond; 12.05.2021