twitterのような「引っ張って更新」の実装

Question

###作っているもの
こういうLine的なチャット画面（スマートフォン想定）
View
http://output.jsbin.com/pahibi
Source
http://jsbin.com/pahibi/edit?html,css,js

###要望
twitterのような「引っ張って更新」の機能を実装したい。
Twitter
https://mobile.twitter.com/

###仕様
下が最新のメッセージになるので、最下部に来た時に
上にスワイプしたら更新が走るように動作させたい。

###質問したいこと
最下部にいるという判定までは作れたのですがここから先がどうすればよいかわかりません。
ご教示いただける方がいらっしゃいまいしたら、よろしくお願い致します。

Answer 1

1. 最下部に来たというフラグをたてる
2. タッチ操作があったら最下部フラグがたっているか見る
3. フラグがたっていれば今度は指が下から上に動いているかを見る
4. 下から上に動いていれば「引っ張って更新」と言うボックスを動かす

その後は一定の距離引っ張られたら更新処理を実行する。

これをJavascriptで書きなおす感じですが、どうですかね？

Comments

[退会済みユーザー]

ありがとうございます！！！！！
ご回答頂いたおかげで、最低限の仕様を満たす動作はできた
と思うのですがツイッターのような滑らかな動きには至っていません。

View
http://output.jsbin.com/pahibi
Source
http://jsbin.com/pahibi/edit?html,css,js

ここからまた時間かかりそうですが・・・。
しかし前進は出来ました、本当にありがとうございました！

Answer 2

最下部にいるという判定までは作れたのですがここから先がどうすればよいかわかりません。
ご教示いただける方がいらっしゃいまいしたら、よろしくお願い致します。

ajaxでリクエストを投げて受け取ったデータを表示です。

http://www.webopixel.net/javascript/308.html

Comments

[退会済みユーザー]

回答有難うございます！
ただ、そこに行き着くまでの過程が知りたかったのでした・・・。

[nanndemoiikara]

お力になれず申し訳ありませんでした。