position:fixedを実現するiScrollを使う際に覚えておきたいメソッドたち

ヘッダーやフッター等の要素を固定表示するのに利用されるposition:fixed。このposition:fixedがサポートされていない環境で、固定表示を実現する際によく使われるライブラリにiScrollがあります。要素を固定するというよりは、特定要素の範囲をスクロール可能にする、overflow:autoのようなイメージです。

複雑なレイアウトになると、iScrollでスクロールさせている要素の高さが動的に変化したり、スクロール領域が入れ子だったり・・・ユーザ操作に応じて追加の処理を行う必要があります。難しそうなレイアウトは設計の際に回避したいところですが、そういう実装が必要な場合に使えるiScrollのメソッドをまとめてみました。

iScrollの使い方

iScrollの使い方ですが、HTML要素に任意のIDを付け、JSで初期化を行います。下記の例ではid=”scroller”の要素がスクロール可能になります。例でリスト要素になっている部分は何でもかまいませんが、2つのwrapper(例ではIDがwrapperとscrollerのdiv要素)は必要です。また、一番外側の要素には高さを指定しておく必要があります。

◆HTML

<div id=”wrapper”>
<div id=”scroller”>
<ul>
<li></li>


</ul>
</div>
</div>

◆JS

$(function(){
var myScroll = new iScroll(‘wrapper’);
});

◆CSS

#wrapper { height:300px; }

スクロール対象のエリアのサイズが変更された場合

iScrollでは、スクロールエリアのサイズが変更になった場合でも、スクロール可能な範囲は初期化時のサイズのまま変化しません。スクロール可能な範囲を変更したい場合はrefreshメソッドを呼ぶ必要があります。

// iScroll領域のリサイズ
myScroll.refresh();

iScrollを一時的に無効にしたい

disableメソッドを呼ぶと、iScrollのスクロールを一時的に無効にすることができます。スクロール中の場合でもスクロール位置はそのままで解除されます。逆に、スクロールを復活させたい場合はenableメソッドを使います。

// iScrollを無効にする
function disableScroll(){
myScroll.disable();
}
// iScrollを有効にする
function enableScroll(){
myScroll.enable();
}

iScrollを入れ子にしたい

少し無理矢理かもしれませんが、iScrollを入れ子にしてみました。入れ子の場合、外側用と内側用の2つのiScrollインスタンスを用意します。何もせずただ2つのエリアを初期化してしまうと、2つのスクロールが干渉しておかしな動きになってしまうので、iScrollのオプションであるonScrollEndやonTouchEnd、onBeforeScrollStart、onBeforeScrollMoveを使います。
このオプションへスクロールの実行前後に実行する関数を登録できるので、スクロールが始まった際に、スクロールしようとする対象が内側の要素だった場合は外側のスクロールを無効にし、内側の要素のスクロールが完了した時点で外側のスクロールを再度有効にします。

// 外側のiScrollの初期化
myScrollOuter = new iScroll(“outerWrapperId”, {
useTransform: false,
onBeforeScrollStart: function (e) {
// イベントの発生元をチェックして、
内側の領域がスクロールされようとしている場合は外側のiScrollを無効にする
if(!isOwn(e.target)){
myScrollOuter.disable();
}
},
onBeforeScrollMove: function(e){
if(!isOwn(e.target)){
myScrollOuter.disable();
}
}
});

// 内側のiScrollの初期化
myScrollInner = new iScroll(“innerWrapperId”,{
// 外側のiScrollを有効にする
onScrollEnd: function(e){
myScrollOuter.enable();
},
onTouchEnd: function(e){
myScrollOuter.enable();
}
});

iScrollインスタンスを破棄する

ページ内遷移等で再度iScrollを初期化する必要がある場合には、iScrollインスタンスを破棄して新しく作り直します。破棄にはdestroyメソッドを用います。ライブラリ内部ではスクロールバーやイベントリスナーの削除が行われます。

if(myScroll !== null){
myScroll.destroy();
}
myScroll = null;

iScrollを使う際に注意すること

iScrollは、スクロール制御のため、tap周りの動作を取得しています。なので、スクロール対象のエリアにinputエリアやselect、textarea等が含まれる場合、iScrollにイベントを取られてしまい、動作しない場合があります。その場合はonBeforeScrollStart内でイベントの発生元のtagNameを判別する必要があります。

onBeforeScrollStart: function (e) {
var tagName = e.target.tagName;
if (tagName != ‘SELECT’ && tagName != ‘INPUT’ && tagName != ‘TEXTAREA’){
e.preventDefault();
}
・・・
}

まとめ

今回はiScrollを利用する上で使えそうなメソッドをいくつか紹介させていただきました。iScrollの本体は、1000行ちょっとと多くはありません。ソースコードを覗いてみることで、イベントの種類やスクロールバー表示の有無などどんなデフォルトオプションがあるか、使えるパブリックメソッドがどれかなどをざっと把握することができるので、使えそうなメソッドが無いか覗いてみるのもいいかもしれません。

Related Post

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML