ASP.NET Core BlazorのVirtualizeコンポーネントでスクロール位置を指定したい

Question

実現したいこと

ASP.NET Core BlazorのVirtualizeコンポーネントで<table>の要素を出力していますが、
画面の初期表示時にスクロール位置を指定したいです。
（たとえば1000行ある中の900行目の位置にスクロールしたい）

一覧から行を選択して詳細画面を開くUIがあり、詳細画面から戻った際に
スクロール位置を詳細画面を表示する直前の位置に戻したいです。

発生している問題・分からないこと

そういったことが可能なのか、可能なのであればどのように実装すべきか
ご教示いただきたいです。

該当のソースコード

@page "/index"

<PageTitle>Index</PageTitle>

<div style="height: 100%; overflow-y: auto;">
    <table>
        <thead>
            <tr>
                <th>sample1</th>
                <th>sample2</th>
                <th>sample3</th>
            </tr>
        </thead>
        <tbody>
            <Virtualize Context="sample" Items="@sampleList">
                <tr>
                    <td>@sample.Sample1</td>
                    <td>@sample.Sample2</td>
                    <td>@sample.Sample3</td>
                </tr>
            </Virtualize>
        </tbody>
    </table>
</div>

@code {
    private List<Sample> sampleList = [];

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            for (var i = 0; i <= 1000; i++)
            {
                sampleList.Add(new Sample
                    {
                        Sample1 = $"Sample1-{i}",
                        Sample2 = $"Sample2-{i}",
                        Sample3 = $"Sample3-{i}",
                    });
            }
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public class Sample
    {
        public string Sample1 { get; set; } = string.Empty;

        public string Sample2 { get; set; } = string.Empty;

        public string Sample3 { get; set; } = string.Empty;
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・「Blazor Virtualize スクロール位置」で検索しましたがヒットしませんでした。

・js（jquery）のscrollTop()でスクロール位置をセットしようとしましたが
スクロール位置が想定より上のほうになってしまい上手くいきませんでした。
※Virtualizeではなくforeachを利用していたときはこの方法で実現できていました。

補足

特になし

Answer 1

この機能はBlazorに長年要望されているが実装されていないものの１つですね。

• Virtualize component Row Index Enhancements (API to scroll to item) #26943

.NET7、8、9、10と延期され、先週「.NET 10 Planning 」も外されてbacklog送りになってますね・・・。

実現方法としてはそのissueでスクロールバーの位置を計算して指定位置に移動させる方法が紹介されてます。

• スクロール位置を計算してJavascriptを呼び出すメソッドを作り、
• JavaScriptのscrolltoで移動するようです。

試していないので動くのかわかりませんがご参考まで。

Comments

[sa_ku_ra]

回答ありがとうございます。
そうなんですね…！勉強になりました。ぜひ実装いただきたいものです…。

展開いただいた方法で、同じ高さの行（tr）のテーブルであれば実現できそうでした。
ただ、実は行の高さが可変でして…

展開いただいた方法では要素の高さと行のインデックスから位置を計算しているようでしたが
（高さ100pxのtableで要素が10個ある場合、2番目の要素の位置は20px）が、
行の高さが可変だとこの方法では計算できませんでした。

Virtualize内で作成したtrの要素が取得できれば、
そこから要素の位置を算出できるのかなと思いましたが、それもうまくいきません。

ChatGPTでIntersection Observerを使ってスクロールを監視したらどうかという案もありましたが
そもそも監視対象の行がhtml上に描画されていない（存在していない）ため
それもできませんでした。

打つ手なしの状態です。

[hqf00342]

残念ながらVirtualize はそもそも可変高のアイテムに対応できていない（初期値はItemSize=50ピクセル）のではと思います。
https://learn.microsoft.com/ja-jp/aspnet/core/blazor/components/virtualization?view=aspnetcore-8.0#item-size

また<table>とも相性悪いと思うので、テーブルを使うならページネーションにしたほうが良い気もします。
どうしてもVirtualizeでというのであれば、JavaScriptでスクロールし続けて、指定のItemがBlazorによってDOM上にレンダリングされるのをgetElementById等で探し、見えたらちょうどよい位置でスクロールを止める、みたいなことになるのでしょう。
だったらアイテム指定できる拡張メソッドを作ってプルリクしたほうがみんなに喜ばれる・・かもしれません。