angular / angular/components

bug(virtual-scroll): scrollToIndex on viewport while inside cdkVirtualScrollingElement is wrong

未关闭
#33,063 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

area: cdk/scrolling gemini-triaged P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### 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 scrolling by index using `scrollToIndex` on the viewport it doesn't take into account any content around the viewport when using `cdkVirtualScrollingElement`.
The logic calculates the offset only based on the `itemSize` without taking into account the viewport offset.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/qmx1v9bc
Steps to reproduce:
1. In the `Regular` section clicking on the button `Scroll to item 50` correctly scrolls to item 50. This is a regular viewport without `cdkVirtualScrollingElement`.
2. In the `With cdkVirtualScrollingElement` section clicking on the button `Scroll to item 50 (not working)` it scrolls to item 48 instead of 50 as there is a 100px header above the viewport while it should scroll to item 50.
3. If the button `Scroll to item 50 (fixed)` is clicked the scrolling works as expected as I calculate the offset myself using `viewport.measureViewportOffset('top')` which is missing in `scrollToIndex`.

### Expected Behavior

It should scroll to the correct item when using `cdkVirtualScrollingElement`

### Actual Behavior

It scrolls without taking into account the viewport offset.

### Environment

- Angular: 21.2.6
- CDK/Material: 21.1.2
- Browser(s): Chrome 146
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 CDK 虚拟滚动 viewport 的实现和 scrollToIndex 入口点开始,然后将其行为与所提供的 StackBlitz 复现中的 measureViewportOffset('top') 进行比较。使用 regular viewport 和 cdkVirtualScrollingElement 两种情况验证更改:滚动到项目 50 时,两个部分都应选择项目 50,包括存在 100px header 偏移的情况。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
64/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。