Twitter は新しいメッセージが上に追加される。
個人的にはこの仕様は直感的ではない。
と言うのも、僕は古いメッセージから順番に追っていく場合、上に古いメッセージがあって、それを下に追っていく派の人間だからである。
てなわけで、上に古いメッセージが残っていて、下に新しいメッセージが追加されるようなチャットの UI を作ってみた。
メッセージの追加とともに自動スクロールする ver.
http://jsfiddle.net/itomaki/dhjhD/
メッセージの流れ方は、LINE と Twitter のターゲットの相違がある？？
上に古いメッセージが溜められ、下に新しいメッセージが追加されることを「古い順に追加」とでも呼ぶことにするか。。
LINE は「古い順に追加」
Twitter は「新しい順に追加」
2ch は「新しい順に追加」
...
LINE は、「会話」をターゲットとするアプリだから、「古い順に追加」なのかもしれない。
「会話」は、どういった経緯でいまの話題になったのか？ということの流れが分からないと噛み合ない。だからユーザは必ず過去の話を参照する必要に迫られる。このとき、「古い順に追加」だと、現在の話題に至るまでの過去の流れを把握しやすい。。ということじゃないかなぁ（<-- 完全に想像）
対して、Twitter や 2ch は「言い逃げ、憂さ晴らしの捨て台詞、ステマ」みたいなものをターゲットとするアプリだから、過去に何を言っていようが、バトンが渡された側はあまり関係ないんだよね。たぶん。（<-- ただの素人の意見です。間違っていたらすいません）
実装上の違い
「新しい順に追加」の場合は、一番上に新しいメッセージが追加されるだけなので、追加されたメッセージの高さだけページが長くなるだけ。ユーザは自発的にスクロールしなくても、新しいメッセージを閲覧できる。
ところが、「古い順に追加」の場合は、一番下に新しいメッセージが追加されるため、この新しいメッセージを閲覧するためには、ユーザは自発的にページを下にスクロールする必要がある。
自動的にスクロールする機能を入れてやればOK。
まとめ
言いたかったことは、わりと小さな工夫（追加する領域の高さだけ下にスクロール）をするだけで、「新しい順に追加」のときに自動スクロールすることができる。ってことです。
position: fixed をうまく使うことも、わりと重要なポイントかもね。