Webページは縦に長く伸びがちです。特にリスト状に情報を載せる際にデータ量をシステムからの出力で動的に変化させている場合、間違って数十万件のデータを一気に表示しようとしてDOMレンダリングが終わらなくなったりします。 そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにしてくれるライブラリです。

virtual-scrollerの使い方

二つのリストを表示している例です。データ数は5000件ですが、スムーズに動きます。

動かしているところです。

水平方向のデモ。

グリッド表示も可能です。

表示時にアニメーションさせることもできます。

並び替え機能付き。

小説などで見出しにジャンプするデモ。

画像と水平スクロールを組み合わせた例。

virtual-scrollerはすべてのDOMをレンダリングするのではなく、表示されている部分(+α)だけをレンダリングすることで操作を高速化しています。UIフレームワークでは実装されていることが多いですが、virtual-scrollerは独立して使えるので既存サイトに用いることもできるでしょう。

virtual-scrollerはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

<virtual -scroller> | virtual-scroller valdrinkoshi/virtual-scroller