"最近ipad/iphoneサイト制作について調べてるんだけど、positon:fixedが使えない関係で、上下固定メニューが厄介すぎるのでメモ。 結論から言えば、 iscroll.js をつかう..."

最近ipad/iphoneサイト制作について調べてるんだけど、positon:fixedが使えない関係で、上下固定メニューが厄介すぎるのでメモ。

結論から言えば、

• iscroll.js をつかう
• Sencha Touch (Ext.js 有料) をつかう

のが現実的っぽい。

ちなみにJQueryMobileはfixed対応をガチでやらずに↓のサンプルのように
http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fixed.html
absoluteで、スクロールされるときに一度消して再配置しています。 たぶん汎用性を優先したんだと思う。

そもそも何が問題かというと

• fixedにしても画面といっしょにスクロールされちゃう
• setIntervalで回して常にabsolute配置を変更して対応しようとしてもスクロール時にはイベントが止まる
• フレームやdiv overflow:scroll は2本指スクロールじゃないと反応しない
• じゃーどうするか。全体のtouchMoveイベントをまるっと殺して全体のスクロールを止めることでfixedっぽくする
• スクロールしたいところはwebkitのアニメーション機能で自前でスクロール実装
• それをやるとtouchMoveできないので画面のズーム機能は使えなくなる
• ipadから見れるApple公式ipad対応ページもそうやってるっぽい