angular / angular/components

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

オープン
#33,063 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/scrolling gemini-triaged P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず CDK の仮想スクロールビューポートの実装と scrollToIndex エントリーポイントから始め、提供された StackBlitz の再現例で measureViewportOffset('top') と動作を比較してください。regular viewport と cdkVirtualScrollingElement のケースで変更を検証してください。どちらのセクションでも、100px のヘッダーオフセットがある場合を含め、項目 50 へのスクロールで項目 50 が選択される必要があります。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
64/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。