我正在使用 Angular 的cdk-virtual-scroll-viewport. 除了订阅视图位置之外，该功能不依赖于它的任何特殊功能，以便在用户滚动到底部时加载新元素（在自定义中DataSource<Item>）：

connect(collectionViewer: CollectionViewer): Observable<Item[]> {
  this.viewChanges = collectionViewer.viewChange.subscribe((listRange) => {
    this.loadItemsFor(listRange);
  });
  ..
}

当所有项目都具有相同的高度时（在 css 和 中指定itemSize）<cdk-virtual-scroll-viewport>，效果很好。现在我尝试添加不同类型的项目，其大小不同（可以说100pxvs 50px）。这并不与FixSizeVirtualScrollStrategy配合良好，因此我尝试使用autosize（cdl-experimental使用AutoSizeVirtualScrollStrategy）。但是，使用动态策略，一旦将新元素添加到备份虚拟滚动的数据源，滚动位置就会闪烁（我假设是因为ItemAverager）。

是否有可行的方法来实施这两种策略的混合？我知道列表中每个项目的类型，因此它的高度，所以应该可以准确计算正在显示的内容和要加载的内容？当然，对于大型集合来说，它的性能可能不那么好。

我正在使用PrimeNG具有自定义筛选和启用虚拟滚动功能的下拉组件。

我发现重新打开该组件时，它没有滚动回到视图列表中的最后一个选择，而是仅滚动回到列表的顶部，这意味着您必须进行物理滚动才能找到所做的选择。

看到这个例子stackblitz

我确实在这里遇到了一个解决方案，该解决方案涉及调用scrollToIndexCdkVirtualScrollViewport实例，这听起来像对我有用。但是，当我尝试将其合并到代码中时，实例变量显示为未定义。

有谁知道这里的正确方法？我正在使用PrimeNG 7.1.3。

谢谢

我想在Angular应用程序上使用虚拟滚动。我列表中的项目是远程页面搜索的结果。每当我向下滚动视口时，我想加载更多结果（调用下一页）。

这是我的模板：

<div class="container">
    <cdk-virtual-scroll-viewport itemSize="100">
        <li *cdkVirtualFor="let item of searchResult">{{item}}</li>
    </cdk-virtual-scroll-viewport>
</div>

这是我根据需要进行的尝试：

export class SearchComponent {
    @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
    searchPageNumber: number;
    searchResults: Array<any>;

    constructor(private scrollDispatcher: ScrollDispatcher, private searchService: SearchService) {
        this.searchPageNumber = 0;
        this.searchResults = [];
    }

    ngOnInit(): void {
        this.nextSearchPage(this.searchPageNumber);
    }

    ngAfterViewInit(): void {
        //this.scrollDispatcher.register(this.scrollable);
        //this.scrollDispatcher.scrolled(1000)
        //    .subscribe((viewport: CdkVirtualScrollViewport) => {
        //        console.log('scroll triggered', viewport);
        //    });

        this.virtualScroll.renderedRangeStream.subscribe(range => {
            console.log('range', range);
            console.log('range2', this.virtualScroll.getRenderedRange());
            if (this.virtualScroll.getRenderedRange().end % 10 === 0) {
                this.nextSearchPage(++this.searchPageNumber);
            }
        });
    }

    nextSearchPage(pageNumber: number): …

使用cdk虚拟视口时，需要设置视口的高度

.example-viewport {
  height: 800px;
  width: 100%;
  border: 1px solid black;
}
<cdk-virtual-scroll-viewport class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

但我希望 cdk-virtual-scroll-viewport 如果未达到出现滚动条的最大高度，则将其包装起来。但视口不适用于最大高度。

如果没有水平滚动条，则视口将高度设置为最大高度即可。但在我当前的设计用户界面中，我需要显示水平滚动条，因为有很多内容列，如下图所示。

然后由于视口的高度，滚动条远远低于。行项目会随着时间的推移而增加，但在项目增加到最大高度之前，我希望水平滚动条换行到内容高度，但目前似乎无法实现。

我不使用 mat-table 的原因是我想支持无限滚动并渲染适合屏幕的项目。Mat-table 不支持这一点，如果我继续向下滚动并请求数据，模板中的行项会增加并影响性能。

有人有更好的建议吗？

多谢。

我有一个包含很多项目的列表，可以选择每个项目。为此，我使用了Angular Material Virtual Scroll。选择一个项目后，选中的项目将突出显示，然后保存在服务器上。当我刷新页面时，所选项目来自服务器，并再次突出显示。

我的代码看起来像

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

问题是，如果选择列表中下方的项目，则该项目将突出显示，但是我必须向下滚动至列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动至该项目。

我的文档中有一种scrollToIndex方法。在哪里可以找到的实例FixedSizeVirtualScrollStrategy，因此可以调用此方法？

我从后端获取了超过 30000 条记录并在前端列出，因此使用 cdk-virtual-scroll 我可以实现这一目标。我创建了用 cdk-tag 括起来的普通表

          <cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th >
                  Name
                </th>
                <th >
                  Description
                </th>
                <th >
                  Group
                </th>
                <th >
                  Data
                </th>
              </tr>
            </thead>
                <tbody>
                  <tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
                    <td >
                      {{data.name}}
                    </td>
                                             
                    <td >
                      {{data.description}}
                    </td>
                    <td >
                     {{data.group}}
                    </td> 
                    <td >
                     {{data.data}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </cdk-virtual-scroll-viewport>

如果我这样做，当我向下滚动时，表格标题也会滚动，如果我喜欢，

          <cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th style="width: …

目标

显示消息列表并在收到新消息时滚动到底部，即使我在顶部。即使使用不同高度的元素，我也想完全滚动到底部。

问题

使用虚拟滚动，我必须设置[itemSize]属性，但对我来说它不是静态值：

• 当一条消息对于一行来说太长时，它会分成多个，因此它的高度会发生变化。
• 我有不同类型的不同高度的消息（例如系统消息）。

此外，我正在使用ng-content从父级插入一个按钮来加载以前的消息。我看到的是，当_scrollToBottom被调用时，它并没有将我带到底部，而是将我带到更高一点。我怀疑这是因为虚拟滚动中元素的高度不同。

我已经从 Angular 阅读了这个自动调整滚动策略问题：https : //github.com/angular/components/issues/10113；但我不确定这会解决我的问题。

欢迎任何我能做什么的想法。

测试

代码沙盒：https : //codesandbox.io/s/angular-virtual-scroll-biwn6

• 加载消息后，向上滚动。
• 发信息。（加载新消息时，不是滚动到底部，而是虚拟滚动停止高一点）
• 重复

错误视频：https : //gofile.io/d/8NG9HD

解决方案

Gourav Garg给出的解决方案有效。只需执行两次滚动功能即可。

我现在这样做：

  private _scrollToBottom() {
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 0);
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 50);
  }

我认为它不是很优雅，但工作正常。

我在 mat-autocomplete 中使用 cdk-virtual-scroll-viewport。每当使用鼠标滚动时滚动都可以正常工作，但每当按下 keydown 按钮时滚动就不起作用。

预期行为：如果焦点超出可见视口，列表应自动向下/向上滚动

实际行为：它只是不滚动，如果到达实际渲染项目的末尾，它会返回到开头并且不渲染新项目。

就像这个链接一样： https: //stackblitz.com/edit/angular-5rmvpq

使用 CDK 自动调整虚拟滚动策略保持滚动位置

我有一个可以与滚动的项的大名单<cdk-virtual-scroll-viewport autosize>提供@angular/cdk-experimental（该项目具有动态的高度，所以我用这个卷轴策略，而不是FixedSizeVirtualScrollStrategy）。

随着时间的推移，新项目被插入到列表中，即它们被附加到顶部。当用户向下滚动时，我想避免新项目将视口中的项目推开。因此，我需要一种机制来在添加项目后保持/恢复滚动位置。

我有一个半有效的解决方案（而且很麻烦，因为它读取私有字段），但是在添加项目后视口会随机移动几个像素。

以下是相关代码部分：

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

...

// After new items have been added:

const offset = this.viewport.measureScrollOffset('top');
const topPosition = offset + newItems.length * this.viewport['_scrollStrategy']._averager._averageItemSize; // the autosize strategy determines an average item size I'm trying to use to determine how the viewport should be shifted

this.viewport.scrollTo({
  top: topPosition
});

我在这里创建了这种方法的演示：https : //stackblitz.com/edit/angular-be926g?file=src/app/cdk-virtual-scroll-overview-example.ts

任何想法如何通过恒定视口无缝地实现这一目标？

我们最近将可滚动列表转换为 CDK Virtual Scroller。（带有 angular/cdk 7.3.7 的 Angular 7.2.12）

简而言之，似乎VirtualScrollViewport正在回收组件实例，而不仅仅是文档建议的模板。

StackBlitz 上的实时 MCVE（更新以反映 EDIT 1）。

编辑 1

一位同事提醒我，我们现在使用命名引用而不是ViewChildren()，如下所示：

HelloComponent（内*cdkVirtualFor）：

@Component({
  selector: 'hello',
  template: `<h1 [class.active]="active">Data Item {{item}} !</h1>`,
  styles: [`.active {background-color: red; color: white}`]
})
export class HelloComponent  {
  @Input() item: any;
  active: boolean = false;
  toggle = () => this.active = !this.active;
}

并在应用程序中实现它，例如：

<cdk-virtual-scroll-viewport itemSize="75">
  <ng-container *cdkVirtualFor="let item of data" templateCacheSize=0>
    <hello #hi [item]="item" (click)="clickByReference(hi)"></hello>
  </ng-container>
</cdk-virtual-scroll-viewport>

// Non-essentials hidden, …