逆順の無限スクロール(infinite scroll)を3行で実現する

LINEのようにイケてるアプリは下から順に最新のメッセージが表示されてて上にスクロールしてくと古いメッセージを読み込んで繋げて無限にスクロールできるようになっている。これをJavascriptのAjax通信を用いて実現しよう。メッセージをスクロールしていって上まで到達したら過去のメッセージを取得して繋げる

messagePane.innerHTML = response + messagePane.innerHTML;

messagePaneがメッセージを表示している本体でresponseが新たに取得した過去のメッセージ。responseをmessagePaneの上部に追加してあげる。ここで一個問題が発生する。仕様なのか新たにresponseを追加するとスクロール位置が最上部に移動してしまう。これだとスムーズに上へとスクロールできない。そこでこうする。

var prev = messagePane.scrollHeight;
messagePane.innerHTML = response + messagePane.innerHTML;
messagePane.scrollTop = messagePane.scrollHeight - prev;

取得したメッセージ付け足す前に前のmessagePaneのスクロールできる高さ（全長）をprevに入れとく。
付け足した後にスクロール位置を付け足した後の全長-prevに設定してあげることで付け足す前の位置に戻れる。