記載日:2023/1/29

勉強として、Angularを使って仮想スクロールを作ってみました。
仕組みは理解していましたが、実際に作ることで理解が深まったと思います。本ページの最後の方で、デモやソースコードのリンクものせているので、普通のスクロールとの応答差も確認できます。

流れ

まず、仮想スクロールとは何かを簡単にふれます。
次に、今回作った仮想スクロールの仕組みの概要を書きます。
最後に、具体的な作り(作成環境、作業の流れ、デモとコード)を記載します。

仮想スクロールとは

仮想スクロールは、表示速度を改善するための技術です。
大量のデータを表示しようとすると、画面の表示時にDOM生成に時間がかかることで、ユーザ体験が悪くなることがあります。仮想スクロールでは、表示範囲+αのみをDOM生成することで、画面表示を早くすることができます。

作りの概要

仮想スクロールを実現するやり方には色々あると思いますが、今回は以下のものを作りました。

・表示領域の高さを２Xとし、表示領域の上下２Xずつ、計６XのDOMを常に用意する。
　（厳密に言うと、一番上にスクロールされたときは４Xにしています。）
・X分のスクロースが行われる毎にDOMを更新する。
・１行の高さは固定値とする。

環境

OS : Ubuntu
node.js : 12.22.9
Angular CLI : 15.0.4
Gitインストール済
Githubアカウント作成済
VSCodeインストール済（拡張機能からGit Graphをインストール済）

作業の流れ

0.高さを決める

以下の高さを決める。
最後に記載のサンプルでは、H=32px、X=160pxとした。
1行の高さ(H)
表示領域の高さ(2X)
表示領域を更新する高さ(X)

1.表示領域の、ページトップからの位置を取得する

スクロールイベントをトリガーにするメソッドを用意する。そこでページトップからの位置を取得する。
サンプルでは、高さX分だけスクロールする毎にトップからの位置を取得する。

2.表示領域の更新

DOM生成領域オブジェクト(viewport)はページトップからの位置を持つ。html側のコードでは、このオブジェクトのプロパティを参照することで、スクロールに合わせてDOMを更新してくれる。

苦労した点は、DOM生成領域を更新する高さ(X)毎に処理を実行すること。

デモ、ソースコード

以下、デモページとソースコードのリンクです。
仮想スクロールと通常のスクロールの２つのページを用意しました。(ソースコードでの仮想スクロール部分がある場所は、src/app/pages/virtualscroll/virtualscroll内。)
スマホとかで見た場合には、通常スクロールの方の画面は表示までに結構な時間がかかるかと思いますので、ご承知おきください。
私のスマホでは、表示されるまでに5～10秒ほどかかりました。

デモはこちら (リンク先から、"Go VirtualScroll Page" ボタンを押してください。)
ソースコードはこちら

参考にさせて頂いたサイト

なし