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

ぐるぐる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

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User