iPhone iPadで「position: fixed」を実現するiScroll « オモテメン（高山一登のブログ）

iPhone iPadで「position: fixed」を実現するiScroll

2010年4月5日(月) 14:47

3日に書いたiPad readyの記事で紹介したNikeのサイトがヘッダーを固定していたのでてっきりiPadはiPhoneで使えなかったCSSの「position: fixed」が使えるのかなと思ったらやっぱりiPadでも「position: fixed」は使えなくて、代わりに「iScroll」というJavaScriptライブラリで実現していたと知ってびっくり。
これを使えばiPhoneでも「position: fixed」に相当するデザインを実現できそうです。デモはこちら
ただしこれを使うと、逆に通常のブラウザではスクロールできなくなるので注意が必要です。上のデモもPCでは機能しません。

使い方は簡単で、JS読み込んでスクロールさせるdivにIDつけて、その親divにもIDつけてあとCSS指定するだけ。詳しくはデモのソースを見れば分かります。2つのdivの間に違う要素が入るとダメみたいなので注意。

そもそもなぜiPhoneとiPadはposition: fixedをサポートしていないのかについては、Safariの公式資料のPreparing Your Web Content for iPadに記載がありました。
どうも、もともとPCのブラウザはWindowとViewportをほぼ同じものとしてレンダリングしているけど、iPhone・iPadではあくまでViewportに対して「position: fixed」していて、Viewport自体はWindowの中にレンダリングされているので、Windowに対して要素はfixされないという感じらしいです。なのでこれはバグでもなんでもなく仕様だとのこと。（しかし明らかにPCのブラウザとレンダリングの整合性が取れないので代替策を提供してほしいけど）

これでウェブサイトで、アプリっぽくヘッダーとかフッターをツールバー風に固定して見せられるのでかなり重宝すると思います。

[updated] Scrolling div for mobile webkit turns 3 | Cubiq.org.