問題タブ [angular-cdk-virtual-scroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Angular 仮想スクロール: Microsoft SignalR を使用して新しいデータがストリーミングされると、新しい項目を先頭に追加します
現在、データのライブ更新に Microsoft SignalR を使用しています。新しいデータが入ってくるたびに、既存の仮想リストに追加し、そのエントリを元の場所から削除したいと考えています。
基本的に、仮想スクロールでシフトを解除し、リストをリロードせずにそのデータエントリをスプライスするにはどうすればよいですか。
angular - CDK autosize 仮想スクロール戦略でスクロール位置を維持する
CDK autosize 仮想スクロール戦略でスクロール位置を維持する
<cdk-virtual-scroll-viewport autosize>
によって提供されたスクロールできるアイテムの大きなリストがあります@angular/cdk-experimental
(アイテムには動的な高さがあるため、の代わりにこのスクロール戦略を使用していますFixedSizeVirtualScrollStrategy
)。
新しいアイテムは、時間の経過とともにリストに挿入されます。つまり、一番上に追加されます。ユーザーが下にスクロールすると、新しいアイテムがビューポート内のアイテムを押しのけることを避けたいです。したがって、アイテムが追加された後にスクロール位置を維持/復元するメカニズムが必要です。
私は半作業ソリューションを持っています (そしてそれはプライベート フィールドを読み取るのでハッキーです)、アイテムが追加された後、ビューポートはランダムに数ピクセルシフトします。
関連するコード部分は次のとおりです。
ここでこのアプローチのデモを作成しました: https://stackblitz.com/edit/angular-be926g?file=src/app/cdk-virtual-scroll-overview-example.ts
一定のビューポートでこれをシームレスに達成する方法はありますか?