allWebクリエイター塾　ブログ: 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」のウェブサイトを開きます。

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

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

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

５，解凍したファイルの中身

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

７、「Scrollability.js」の記述

<head>

</head>

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

ホリゾンタル

テーブルビュー

今後の機能追加予定

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

が予定されています。

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

2011/08/05