virtual-scroller - 長大なリストもサポートするスクロールライブラリ
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