Twitter は新しいメッセージが上に追加される。

個人的にはこの仕様は直感的ではない。
と言うのも、僕は古いメッセージから順番に追っていく場合、上に古いメッセージがあって、それを下に追っていく派の人間だからである。

てなわけで、上に古いメッセージが残っていて、下に新しいメッセージが追加されるようなチャットの UI を作ってみた。

メッセージの追加とともに自動スクロールする ver.
http://jsfiddle.net/itomaki/dhjhD/

メッセージの流れ方は、LINE と Twitter のターゲットの相違がある？？

上に古いメッセージが溜められ、下に新しいメッセージが追加されることを「古い順に追加」とでも呼ぶことにするか。。

LINE は「古い順に追加」
Twitter は「新しい順に追加」
2ch は「新しい順に追加」
...

LINE は、「会話」をターゲットとするアプリだから、「古い順に追加」なのかもしれない。
「会話」は、どういった経緯でいまの話題になったのか？ということの流れが分からないと噛み合ない。だからユーザは必ず過去の話を参照する必要に迫られる。このとき、「古い順に追加」だと、現在の話題に至るまでの過去の流れを把握しやすい。。ということじゃないかなぁ（<-- 完全に想像）

対して、Twitter や 2ch は「言い逃げ、憂さ晴らしの捨て台詞、ステマ」みたいなものをターゲットとするアプリだから、過去に何を言っていようが、バトンが渡された側はあまり関係ないんだよね。たぶん。（<-- ただの素人の意見です。間違っていたらすいません）

実装上の違い

「新しい順に追加」の場合は、一番上に新しいメッセージが追加されるだけなので、追加されたメッセージの高さだけページが長くなるだけ。ユーザは自発的にスクロールしなくても、新しいメッセージを閲覧できる。

ところが、「古い順に追加」の場合は、一番下に新しいメッセージが追加されるため、この新しいメッセージを閲覧するためには、ユーザは自発的にページを下にスクロールする必要がある。

自動的にスクロールする機能を入れてやればOK。

まとめ

言いたかったことは、わりと小さな工夫（追加する領域の高さだけ下にスクロール）をするだけで、「新しい順に追加」のときに自動スクロールすることができる。ってことです。

position: fixed をうまく使うことも、わりと重要なポイントかもね。