スマートフォンTweetこんにちは。スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。iOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないため、iOS4でCSSのみでヘッダーを固定することが難しくなっています。そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。http://cubiq.org/iscroll-4上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。使えそうなのが、lite、pull-to-refresh、carousel、あたりです。liteは最も簡略化した使い方のサンプル、pull-to-refreshは表示したリストが上限まで達した際に次のリストを動的に読みこませるサンプル、carouselはページ単位で横スクロールを実装できるサンプルになっています。litepull-to-refreshcarouselliteのソースコードを見ればわかりますが、基本的な使い方は簡単で、サンプルをコピペすれば簡単に作れてしまいます。基本的なhtmlの構造はこんなかんじです。id="wrapper"><ul><li>row1</li><li>row2</li><li>row3</li>...</ul></div>これで以下のようにスクリプトを実行させます。false);DOMの読み込み完了後でないとiScrollが実行できないため、DOMContentLoadedイベント発生後にnewされるようになっています。タッチ時に余計な動きを起こさないようにtouchmoveイベント発生時のデフォルトの動作をキャンセルさせています。これにサンプルのソースのcssをコピペすれば完成です。ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。複雑な処理を指せる場合はiScrollのコンストラクタ第2引数で色々なオプションをつけることができるので、何か特殊な操作をさせたい場合は近い動作をするサンプルのソースを見てみるか、公式ページでオプションを確認してみると良いかもしれません。スマホ向けのページを作るにはとても便利なので、ぜひ一度試してみてはいかがでしょうか。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。