2011/08/05

iPhone で 「position:fixed」をスムーズに実現する 「Scrollability」

スマホサイト制作でナビゲーションを画面最下部に固定したいと思ったことはありませんか?
ページの最下部にナビゲーションを設置

しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。




作製はFirebug のオリジナルの開発者でもある Joe Hewitt氏(Facebook)です、否が応にも期待したくなります。


この「Scrollability」は、縦方向へのナビゲーションの固定のみだけではなく、水平方向へのナビゲーションの固定ができます。
デモ動画
http://www.youtube.com/watch?v=JPS4eLMGVOE


実装方法


ダウンロードURL

1、「Scrollability」のウェブサイトを開きます。

2、「Download」をクリックしてファイルをダウンロード

3、「tar.gz」か「.zip」のどちらかを選んでファイルをダウンロードする。


4、ダウンロードしたファイル


5,解凍したファイルの中身

6、「Scrollability.js」を読み込みさせます。

7、「Scrollability.js」の記述


<head>

<script src="assets/js/scrollability.js"></script>

</head>



8、公式サイトには2つのデモが掲載されています。下記のグリーンの画面のデモは水平方向へスクロールすることができます。

ホリゾンタル

テーブルビュー




今後の機能追加予定


Scrollability」のウェブサイトでは、今後の開発予定の機能の説明があります。

  1. テーブルのヘッダーの固定
  2. 写真ズーム
が予定されています。


まとめ
iScroll も同様に position:fixed を適用することができます。しかし、筆者の環境では「Scrollability」のほうがスムーズに動作しました。