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

Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。

そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。

scrollMonitorの使い方

利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。

見出しを残してスクロールもできます。

scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。これによって大量のデータでも安定したスクロールを実現しています。scrollMonitorをそのまま使うこともでいますが、ここから学ぶ点もありそうです。

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

デモ1

デモ2

stutrek/scrollMonitor: A simple and fast API to monitor elements as you scroll

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2