angular / angular/components

bug(cdk-virtual-scroll): Only shows a few items when using scrollWindow property

Open
#25,336 36 comments 2 reactions 0 assignees View on GitHub
area: cdk/scrolling P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

When you use the scrollWindow property it only renderers the initial items (the ones inside your min and max buffer settings) after that it is just blank spaces.

It also happens at the angular material show case example, it only show the first 21 items. I tried to use the checkViewportSize() method but of no use.

https://material.angular.io/cdk/scrolling/overview

### Reproduction

https://stackblitz.com/edit/angular-1uahhp?file=src/app/cdk-virtual-scroll-window-scrolling-example.ts

Steps to reproduce:
1. It already happens on the virtual scrolling window example.

### Expected Behavior

It should render new items as you scroll down the page, eventually rendering all the items.

### Actual Behavior

It stops rendering items after the initial ones are rendered.

### Environment

- Angular: 14.1.0
- CDK/Material: 14.1.0
- Browser(s): Chrome, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS

Contributor guide

Open the contributing guide

Research direction

Run the linked StackBlitz reproduction and compare it with the Angular Material virtual scrolling window example. Trace the scrollWindow behavior from the virtual scrolling example and verify that scrolling past the initial buffered items renders subsequent items instead of blank space in Chrome and Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.