ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにしてくれるライブラリです。

virtual-scrollerの使い方

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

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

水平方向のデモ。

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

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

並び替え機能付き。

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

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

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

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

| virtual-scroller

valdrinkoshi/virtual-scroller

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2