iScroll.jsで動的に要素を追加したときにスクロールしない場合の解決法

スマートフォン対応ページを作るときにjQuery Mobileの固定headerとfooterのフワってなるのがいやだ!って人は、iScroll 4を使うといいです。
サンプルを見てみるとちゃんと動きますが、このli要素は動的に書き換えたいなぁってことが多々あると思います。

例えばこんな感じに

<body>
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

<script type="text/javascript">
var target = document.getElementById('thelist').getElementsByTagName('li');

for(i = 0; i < target.length; i++) {
        var e = document.createElement('img');
        e.setAttribute('src','img/' + i + '.jpg');
        e.setAttribute('width','240');
        target[i].appendChild(e);
}
</script>
</body>

するとDOMを読み終えたはいいものの、まだ画像が完全にロードされてないせいで、高さがわからずにスクロールできる範囲が中途半端な状態になってしまいます。

そんな場合はiScroll.jsをこのように修正してやるといいみたいです。

//省略
_start: function (e) {
        var that = this,
        point = hasTouch ? e.touches[0] : e,
        matrix, x, y,
        c1, c2;
        
        that.refresh(); //318行目追加

        if (!that.enabled) return;
//省略

参考: [スマートフォン]ヘッダーを固定配置にするJavaScript/ – サイブリッジラボ

例では、画像を追加してるだけなのでli要素のheightにあらかじめ画像の高さ分を指定しておけば問題ないといえばないんですが、本来ならもっと可変的だと思うので、上記のようにiScroll.jsを修正しておく必要があると思います。
これだけ覚えておけばjQueryにも頼ることなくスマートフォン対応ページも作れそうですね。


この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

「that.refresh();」を追加したら
「iScroll4」が正常にスワイプしなかった不具合が解消されました。
ありがとうございます♪

yumin2013年2月13日 2:31 PM

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ