あれこれ、タッチ対応のスクロールバーをカスタマイズできる、
スマホ用のプラグインを探していると、
最終的にブラウザの持つ、スクロールで更新してしまう機能などと
衝突したりして、うまく使えないものもあった。
その中で
iScroll というのが一番うまく動いて、
指で謎って動かしすぎた時に、裏のスクロールや
そのブラウザで他の挙動が起こったりする事ができた。
というか、数種類みたりしてみたけど、どれも優れて居そうな点はあるけれど、
何処かを多少の手間を入れて補わなければいけない雰囲気。
実は一度、jQuery custom content scroller を試したけど、
一番上まで入ってスワイプでブラウザ更新にiPod のChrome でひっかかり、
こりゃ使えないな！って思って、実装した後にこの
iScroll に変えました。
これバージョンがあって
http://cubiq.org/iscroll-4
http://cubiq.org/iscroll-5
とあったので、iscroll-5 を使ってみました。
問題だったのは、タイトルにある様に、
iScrollをjQuery Mobiel で使う場合の初期化は、$(window).load で
なければ、jQuery Mobile って全てをスクリプトで処理した後で
無いのに、それを知らずに
$(document).ready
とか
$(document).on("pagecontainerchange" ~~~
を使っていて、alert()を入れてびっくり、
まだ描画が途中なのにこれらのイベントが発生しているので、
スクロールできる量、heigth とかが確定していないままで
iScroll の初期化をしていました。
なんで分かったかっていうと、
alert()をいっぱいしているサイトを見て
http://weback.net/jqm/2439/
そうか、こうなったら知りうる限りalert() しちゃえば、
どうなってるかそこでコマ切れで見られる！！！
って単純な発想で、既存のスクリプトに付け加えたりしてみました。
//------------------------------------------------------------------------
$(document).ready(function() {
alert("document ready");
});
$(document).load(function() {
alert('document load');
});
$(window).load(function() {
alert('window load');
});
$(window).ready(function() {
alert('window ready');
});
//サイトにあったのとか、＋アルファ
$(document).on("pagecontainerload", function(e,d){
alert("pagecontainerload - ページロード完了後 - ページ遷移で発生");
});
$(document).on("pagebeforecreate", function(e,d){
alert("pagebeforecreate - ページ初期化前 - ページロード/ページ遷移で発生");
});
$(document).on("pagecontainerbeforehide", function(e,d){
alert("pagecontainerbeforehide - 前ページの非表示前 - ページ遷移/リターンで発生");
});
$(document).on("pagecontainerchange", function(e,d){
alert("pagecontainerchange - ページ変更後 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagebeforecreate", function(e,d){
alert("pagebeforecreate - ほとんどのプラグインの自動初期化の前、ページ初期化処理の最初に発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecreate", function(e,d){
alert("pagecreate - Ajaxであるかどうかにかかわらず、ページがDOMに生成されたときに発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecreate", function(e,d){
alert("pagecreate - jQuery Mobile のロードが終わった時点で発生する - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecontainerbeforechange", function(e,d){
alert("pagecontainerbeforechange - ページロードあるいはページ遷移前と、ページロードが成功して完了した後の２回発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pageinit", function(e,d){
alert("pageinit - ページの初期化が完了した後 - ページロード/ページ遷移/リターンで発生");
});
//------------------------------------------------------------------------
これだけで順番が分かったので、改めて、windows.load が一番最後に発生する！って思いました。
ただjQuery のラッパー込みで読み出しているので、jQuery ですが。
私の場合、スクロールバーをカスタムしているので
$(window).load(function() {
myScroll = new IScroll('#menu_scroll_contents', {
// scrollX: true,
scrollbars: 'custom', //カスタムの見栄えを使う
click: true,
mouseWheel: true, //マウスホイールでの操作を有効
keyBindings: true, //キーでの操作を有効
interactiveScrollbars: true, //内部の移動とバーの移動が正比例か反比例か？(ture=正比例)
fadeScrollbars: true //動かすと現れて、止めると消えるスクロールバー
});
});
にして動きました！
$(document).ready
とか
$(document).on("pagecontainerchange" ~~~
だと、スクロール量も表示の大きさもおかしかったので
うまくいってよかったのと、改めて、イベントのタイミングを
見直せたかな？と思いました。
以上、何時もの様にメモでした<_ _>
追伸：
他の参考サイト
http://weback.net/jqm/2433/
http://www.buildinsider.net/web/jquerymobileref/35
iscrollview(プル機能)
GitHub
これもiScroll の拡張で、そのブラウザが邪魔してた部分、
リロードになってたけれど、そこを好きな機能、中身だけ更新とか
新しい情報を読み込む挙動をJavaScirpt で作れるのでいいな！と思ったので
これもメモです。
[0回]