Skip to content

bug(cdk/scrolling): The append only mode assumes that scrolling starts at zero and therefore calculates renderedRange incorrectly #23578

Open
@philippspindler

Description

@philippspindler

Reproduction

Steps to reproduce:

  1. Create a virtual scroll container with appendOnly
  2. Load the virtual scroll container and don't load it from the top
  3. The renderedRange is wrongly calculated/set

Expected Behavior

A virtual scroll container can be loaded at any position without renderedRange being set incorrectly.

Actual Behavior

The renderedRange was set incorrectly once the virtual scroll container was loaded not at the top. I archived this behaviour via the following CSS setting.

[cdk-virtual-scroll-viewport] {
  overflow-anchor: none;
}

A possible solution

I was able to solve this issue by overriding the following code at virtual-scroll-viewport.ts#L292

if (this.appendOnly) {
-  range = {start: 0, end: Math.max(this._renderedRange.end, range.end)};
+  range = {start: Math.min(this._renderedRange.start, range.start), end: Math.max(this._renderedRange.end, range.end)};
}

I am not sure if I am missing something. For this reason, I have just opened an issue and no pull request for now.

Environment

  • Angular: 12.2.5
  • CDK/Material: 12.2.5
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/scrolling

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions