nihimotoの日記

https://mapsengine.google.com/map/edit?mid=zhpqXW1XM-zc.kmD-c8p1GAWI

jQuery mobile で position:fixed をどうにかする

本日始めて知ったのですがmobile safariではCSSのposition:fixedは使えないそうです。
よって、画面の一部分にボタンを固定して置いておく、というUIが作れない。
もちろんそれでは困るので、各種対策を試みている先達たちがおります。


色々調べてみましたが、「fixedできない?なら、しないでも大丈夫なようにすればいいじゃん」ということで、iscrollというjqueryプラグインを使うのがよさそうです。


iScroll


これは、本来画面をタッチして指を滑らすとウィンドウ全体がスクロールされるのですが、このイベントを乗っ取ってしまい、ウィンドウがスクロールするのではなくて特定のdiv内がスクロールされるように、差し替えてしまうjqueryです。


fixedしたいオブジェクトをスクロールされるdivの外に置いておけば、まるでfixedされているかのように画面のスクロールに関わらず、表示位置が固定されることになります。
ステキです。


が、このプラグインjQuery mobileと同時に使うと問題が出ます。
jQuery mobileは一つのHTMLの中に複数の画面が収まっているわけですが、iscroll先述の通りデフォルトのスクロールを無効化してしまうため、fixedが必要のないページまでスクロール不可能になってしまいます。該当のページでだけ有効になってくれればいいのですが、手動で切り替えとか作るのは少々面倒臭い。


というわけで、さらに先達を探してみるとありました。


YappoLogs: iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った


こちらで提供していただいている jquery.mobile.iscroll.js を使うと、jQuery mobile の必要なページでだけiscrollの機能を有効にすることができます。

iscrollもjquery.mobile.iscroll.jsも、使い方はそれぞれのページに記載がありますので、具体的なサンプルコードなどはそちらを見てみてください。


自分はほぼサンプルのコードのまま実装できましたが、下記2点だけちょっとはまりました。

  • jquery.mobile.iscroll.js の SafariWindowHeightFix という変数値、ここがスクロール領域の高さの値に影響を与えています。おそらくFooterがない場合にはこれがあると隙間が出てしまうので、0に変更させていただきました。
  • data-iscroll="scroller" を割り当てたdivにはheightとwidthがないと、スクロールが動作してくれませんでした。正しいheightとwidthを調べてstyleに書いておく必要があるみたいです。

というこうで以上です。
プラグインの作者の皆様ありがとうございました。