2015.03.29

jQuery iOSでもひよこを止めろ!

以前jQuery スクロールに付いてくるtopに戻るボタンという記事を書きました。
iPhoneでは謎の挙動で実現できなかった下までスクロールしたらfooterの他の物と重ならない位置に追随ボタンを固定したい。という望みが一応、叶いましたので備忘録として書き留めたいと思います。

ヘンな高さを算出してる問題

Mobile Safariの ’$(window).height()’で取得する数値が変なのよねーという問題だったようです。
当時は調べ方が悪く.scrollまわりのバグ?という情報しか拾えませんでしたが、scrollは関係なかったもよう。

正しいwindowの高さを取得するには、javascriptのinnerHeightを使うとのこと。

参考サイト:
jQueryでMobile Safariの$(window).height()の正しい値を得る方法 – memo.yomukaku.net

まるっと頂きました。

画像やAjaxを読み込む前に高さを算出してる問題

原因はもう一つ。
症状は止めたい位置にボタンがさしかかるといきなり画面上から消えてしまうというものでした。表示外のとんでもない位置に固定されていたんですねw 画像が全て読み込まれないreadyイベントの段階でdocument全体の高さを習得していたのも原因のようです。
画像を含めたページ全体の読み込みが出来たところで、documentの高さを.height()で取得するために
今回はjQueryの

を使うことにしました。

最初のスライド動作がぎこちなくなるものの、ボタンがどっかに行っちゃうことはなくなりました。

でもでも、画像の読み込み後の処理は別にした方が良くない?問題

これでいいかなぁーと思っていたのですが、既にreadyイベントの中で’$(window).on(‘load’,function{..’ を使っている部分があったのを思い出しました。
モバイルなどでは、ページ読み込み完了前にスクロールを始めることの方が多いかもしれませんし、ボタンのスクリプト自体はDOMの構築後発動してくれておもいっきり差し支えない訳で…
ボタンを止める位置のスクリプト部分のみ.onの引数のfunction内に書き直しました。

これでブラウザ共通のスクリプトになりました。iPhoneの分岐を書かなくてよくなったので、コードを少し減らす事ができました。
はーすっきり。

コメントをどうぞ



PageTop