Angular 虚拟卷轴跳来跳去

Question

我正在使用 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

如果发生这种情况，它会自动滚动到虚拟滚动条的末尾。

Answer 1

虚拟滚动依赖于可计算的元素高度来计算偏移量。要控制这一点，请将 cdk-virtual-scroll-viewport 的输入 itemSize 设置为您希望项目具有的任何高度（以像素为单位）。

如果您的 ITEM_SIZE 与实际商品尺寸不匹配，则会发生您描述的行为。

示例：

css:

.my-style {
    height: 42px;
}

html:

<cdk-virtual-scroll-viewport [itemSize]="42" [...]>
     <!-- ... --->
</cdk-virtual-scroll-viewport>

Angular 虚拟卷轴跳来跳去

Angular Virtual Scroll Jumps around

angular

angular-material

scrollview

angular-cdk-virtual-scroll