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

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

縦書きに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’;}

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み