スクロールしたら追加でロードするみたいな実装

アクセスして表示したらコンテンツの一部(limit と offset の limit のぶん)が表示され、スクロールして下端までたどり着いたら追加でロードしてまた limit のぶん表示して、を繰り返す、無限スクロールによるローディングみたいなやつを実装した。

難しい。

考えることがいっぱいあって、ローディングだけならまだしもコンテンツの追加とか削除とか編集をしたときにどう画面をリフレッシュするかみたいなことも考える必要がある。

ひとまずscrollTop、scrollHeight、offsetHeight、offsetWidthのようなプロパティを学ぶことができた。

初期表示時の時点でスクロール可能ということでscrollHeightはoffsetHeightよりも大きくなっていて、スクロールして追加ロードして DOM が更新されたらscrollHeightはさらに大きくなる。

追加でロードしたときにscrollTopをどこに持っていくかみたいな計算をする必要があったりして、勉強になった。