iPad風の複数ペインタッチスクロールをつくるjQuery.iFingerScroll

■先週末会社でiPadで毎日使うWebサービスを想定した1Dayプロトタイピングというのをしていて（そのうちまとめられますがとりあえずYoutubeの動画で様子が見られます）、iPadWebアプリのブラウザモックをつくったのですが、そのとき困ったのが、iPadアプリで見られる左サイドのペインに一覧、右サイドのメインペインに詳細を表示するようなスクローラブルな複数ペインUIをふつうにつくる方法がmobileSafariに用意されてないことでした。そもそもmobileSafariにはスクロールバーがないんですよね。

ブラウザでiPhone風のグラブスクロールを実現するjQueryプラグイン「overscroll」というのを見つけて入れてみたんですがこれでもだめで。調べたところmobileSafariには（スクロールバーがないためか）そもそもscrollTop/Leftプロパティそのものがなかったので、スクロールを実現するにはposition:absoluteでtop/leftを直接いじらないといけないことがわかりました。

先週はモック用にoverscrollベースで全体的にいじってとりあえずしのいだのですが、せっかくなのでまとめなおしたものを公開しておきます。

• jquery.iFingerScroll.js

• デモ(要iPad,iPhone,Chrome,Safari4)

• つかいかた

   $(document).ready(function() {
    $("#sidebar").iFingerScroll();
    $("#main").iFingerScroll();
  });
  

  など

まだネイティブのスクロールUIとはいろいろ違いがあります。

• スクロール端でドラッグを続けた時のラバーバンド的なエフェクトがない
• ドラッグを放したときのアニメーション中に再度クリック、ドラッグしても、アニメーションが終了するまで操作ができない
  • 動作が軽くなるかとアニメーションをCSS Transitionsにしたため、途中で止められなくなっています。jsアニメーションに戻したほうがいいかも。
• 動作、アニメーションがぎこちない

とはいえモックつくったりするには便利なのでつかってみてください。またはもっといいもの教えてください。