iScrollを使って、ページ内にスクロールする領域を作る

以外に出来ないのが、通常のサイトだと<div style=”height:200px”></div>のようなコンテナを作って、この中の要素が200pxを超えたら、勝手にスクロールが出てくれるのですが、mobile用のhtmlを利用する場合は、スクロールする事ができない。

ポジションfixedに関しても実装しても、動きがかくつく事が多い。

たまにバナーがスクロールすると、消えて、点滅して現れるみたいな状況がある機種があるのだけど、これはおそらくfixedを使った為に端末の処理の問題が顕著に出てしまっているのだと思う。

 

解決方法

実は解決方法として、もっとも最初に考えられたのが、toucheventを取得して、指の動きを判別して、中身をスクロールをプログラムで制御をする。

という事なのだけど、これは案外と操作が複雑になってしまう。例えば指の動きに合わせてのスクロールであれば問題ないのだけど、スマートフォンだと一般にフリックと呼ばれる投げるような動作をする事でページを大きくスクロールする事が出来る。

 

上記の解決方法の手間を省いてくれるのがiscrollである。

使い方はシンプルで

<div id="cont"><div>コンテンツ</div></div>

があった場合に

myScroll = new iScroll('cont');

とするだけで簡単に利用ができます。

注意点としては、contには高さを指定しておく必要があります。

 

で、これを使って、例えばajax的なコンテンツを作りたい場合、ページ内遷移をした場合に遷移先のページでもiScrollを利用する場合には、

if(myScroll!=null){myScroll.destroy();}
myScroll = null;
myScroll = new iScroll('cont');

のように同じインスタンスを使ってdestroyで前に使っていたスクロールを破棄して、新しいスクロールを追加しています。

破棄をしないで使うといくつもスクロールが追加されてしまって異様に重くなる場合があるので注意です。

同一ページに2つなどであれば、別のインスタンスを作成して

myScroll2 = new iScroll('cont2');

などでも問題ありません。

 

で、また別のケースで、ユーザーの操作などで、中のコンテンツが入れ替わったり、増えたりする場合に、スクロールをする長さが変わりません。で上記のように破棄をして再度、利用をする形だと、スクロール位置が一番上に戻ってしまうので場合によっては使えるのですが、ほとんどの場合は使いにくい状態になると思います。その場合には、refreshが用意されているので、

myScroll.refresh()

をすると中身のデータの長さに合わせてスクロールを再設定してくれます。

 

で使う時にコンテンツの一番上から、だと、問題ないのに、コンテンツの真ん中あたりから、スクロールをさせようとした時に位置がおかしい場合があります。その場合には、次のようにしてみてください

myScroll = new iScroll('cont',{useTransform: false});

これで思ったとおりの場所にスクロールしてくれる事があります。プロパティは意外にたくさんあるので、いろいろ調べてみてもいいかもしれません。

 

また、inputエリアやselect、textareaが存在する場合に、使えなくなる場合があります。これは上記で説明したようにスクロールをさせる為のtapの動作をiScrollで取得をしている為で利用をする場合には、次のような関数を用意します。

myScroll = new iScroll('cont', {
                onBeforeScrollStart: function (e) {
                    var target = e.target;
                    if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
                        e.preventDefault();
                    }
                    
                }
            });

で通常は、ページのスクロールをする為に画面に触った瞬間にそのタッチのイベントをスクロール以外で使われないように制御するのですが、タッチした瞬間にタッチの対象がselectか、inputか、textareaであればタッチのイベントをそのままタグの方に伝えてくれるので、問題なく利用ができるようになります。

 

上記のように少しは面倒臭い部分があるのですが、本当はものすごい面倒くさい部分を引き受けてくれてるiScrollです。一度、iScrollがない状態で挫折を味わってからだと神プラグインと思えます。ぜひお試しください

iScroll

  • written on 2012.11.24
  • category : mobile

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑