angular / angular/components

CdkVirtualScrollViewport will not scroll past 266304 rows, no matter how many rows are in the array

Offen
#24,208 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling docs P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Using the example project found at:
https://material.angular.io/cdk/scrolling/examples#cdk-virtual-scroll-context

If one increases the items array length to 1,000,000 elements, the virtual scroll viewport still renders and scrolls but will not scroll down past row number 266304.
`export class CdkVirtualScrollContextExample {
items = Array.from({length: 1000000}).map((_, i) => `Item #${i}`);
}`

This puts a hard cap on the size of dataset one can scroll through.

### Reproduction

Steps to reproduce:
1. Open in stackblitz the example found at https://material.angular.io/cdk/scrolling/examples#cdk-virtual-scroll-context
2. Increase the size of the array for the data feeding the example to 1,000,000 elements
3. Attempt to scroll to the bottom.

### Expected Behavior

Expect to see Item # 1,000,000 at the bottom area of the virtual scrolling area.

### Actual Behavior

I see item # 266,304 at the bottom of the scrolling area, with the scrollbar all the way at the bottom.

### Environment

- Angular: 13.0.0
- CDK/Material:13.1.2
- Browser(s): Brave, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Limit im im Issue verlinkten CDK-Kontextbeispiel für virtuelles Scrollen, indem du das Array auf 1.000.000 Elemente änderst. Untersuche das Verhalten des virtuellen Scrollens von CDK im Bereich der maximalen Scrollposition; abgeschlossen ist die Aufgabe, wenn der Viewport das Ende des Arrays erreichen kann, anstatt bei Zeile 266304 anzuhalten, und die Reproduktion in den aufgeführten Browsern verifiziert wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.