画面を上から下に引っ張ったときにページを更新する - htmlにて〜pull to refreshと言うらしい

はじめに

どういうタイトルつければいいかわからなかったのですが。
iPhoneアプリとかでリストページを下に勢いよくスクロールしときにページの上の方にクルクル「更新」画像が表示されるあれ。
cordovaでのハイブリッドアプリ開発で実装したくて調べてたところヒントになりそうなjsのライブラリがあったので紹介です。

overscroll.jsを使う

GitHub - tholman/overscroll: Javascript for adding small easter eggs when over scrolling on apple devices.
githubはこちら。

イメージは画面を上から下にひっぱるとこんなのがでてくるやつです。(わかりずらくてすみません、、、)

htmlとjs

<div class="over-range over-range-top">
  <img  src="./loading.gif" /><div> 更新中</div>
</div>
<script src="./js/overscroll.js"></script>
<script>
  var overscroll = new Overscroll();
  overscroll.bindElement( document.querySelector('.over-range-top'), 'top', 2);
</script>

css

.over-range {
  /* Dimension */
  width: 64px;
  height: 94px;

  /* Fixed position */
  position: fixed;
  left: 40%;
  top: 0px;

  /* Centered horizontally, and hidden above screen */
  margin: 0 auto;
  margin-top: -94px;
}

githubのサンプルから関係なさそうなのを削除しただけなんですけど、、、
css苦手なので頑張って調整してみたけど、なんか違う気もします。が、とりあえず実装はできそう。

おまけ

GitHub - jordansinger/Hook: Pull to refresh for the web
こんなのもありました。これは画面を上から下にスクロールしたときにページをリロードとかできるみたいです。
次回試してみます。

アプリにありがちなuiなので、onsenuiとかで実装されてないのかなとか期待しつつもう少し調べてみようと思います。
ただ、いずれも中身をみるとソース自体は軽量ぽいので、みんな頑張って自前で実装しているのかな、、、
この手の機能はgoogleで調べようとしても用語自体よくわかってないので、なんてキーワードで検索すべきか悩ましい

以上です。