はじめに
READMEで"Support for millions of rows"と謳っているSlickGridですが、全ての行のDOM要素を作るのではなく画面上に見える分だけを作る方式をとっています。
行のDOM要素を載せるコンテントペインは1行の高さ×行数の高さを持つdiv要素として実現しています。
が、div要素の高さはブラウザ毎に限界があります。それを超えると設定しても、その後高さを取得すると0になってしまったりします。
SlickGridでは以下のコードで限界値を調べています。
自分でも実際に調べてみた
これを参考にしつつ、1px単位で限界値を調べるプログラムを書いて試してみました。
デモ: https://hnakamur.github.io/jquery-examples/height-scrolltop-limit.html
ソース: https://github.com/hnakamur/jquery-examples/blob/gh-pages/height-scrolltop-limit.html
実はもっと行けるらしい
JavaScript Grid with One Million Records | JavaScript UI - w2uiの"Browser Limits"のセクションを見ると、もっと大きな値になっています。
またStackOverflowでのSlickGridの作者のコメントを見るとコンテントペインに高さ1メガピクセルとかのdiv要素を敷き詰めれば、空のdiv要素より高さの限界値を上げることができるそうです。