ScrollShutterとは？
例えば、ページの途中にGoogle Mapsの埋め込み地図などがあると、スクロール中に引っかかってしまうことがよくありませんか？「地図を動かしたいんじゃなくて、俺はページスクロールしたいんだよ」という具合に…。ScrollShutterは、そんなインラインフレーム・コンテンツに、ページスクロール中、シャッターをかけてくれる、ちょびっと便利なライブラリです。jQueryは必要ありません。
ページスクロールをちょっと快適にするScrollShutterの使い方
この記事は、Advent Calendar、「らいとなデブ SYNCER」の1日目の記事です。スマホなどタッチデバイスでのページスクロールをちょっとだけ快適にするJavaScriptライブラリ、ScrollShutterを作ってみたので配布します。スクロール中に、インラインフレームにシャッターをかけちゃいます。
サンプルデモ
テキストだけではよく分からない人もいると思うので、下記にサンプルデモを用意しました。マウスの方も、タッチデバイスの方も、ページスクロールをしてみて下さい。「シャッターをかけない場合」の上の地図だと、スクロール中に、地図に引っかかってしまいますが、ScrollShutterを適用した下の地図なら、邪魔されずに、そのままスクロールできます。スクロールが止まって、200ミリ秒後に、地図内の操作が可能になります。ちなみに、ここでは分かりやすいようにシャッターがかかっている最中は真っ黒に塗りつぶしていますが、本番ではそんな野暮なことはありません。
シャッターをかけない場合(通常)
地図を読み込み中です…。
シャッターをかけた場合
地図を読み込み中です…。
ライブラリの入手
ScrollShutterのライブラリは、下記より、ダウンロードして下さい。
ファイル一覧
- SYNCER000676
- scrollshutter.html Download
- scrollshutter.js Download
- fire-scrollshutter.js Download
- scrollshutter.css Download
- readme.txt Download
ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。
ご利用の際は、付属のREADMEファイル(readme.txt)をご確認下さい。
ダウンロードしたファイルを解凍して下さい。利用するのは、scrollshutter.jsとscrollshutter.css、2つのファイルだけで大丈夫です。
SYNCER000676.zip
- SYNCER000676
- scrollshutter.js
- scrollshutter.css
プログラミング
それでは早速、簡単にScrollShutterを実装してみましょう。特別な知識は、全く必要ありません。まずは、HTMLのヘッダー部分で、ダウンロードしたスタイルシートとJavaScriptを読み込んで下さい。
HTML
<head>
<!-- スタイルシートの読み込み -->
<link href="./scrollshutter.css" rel="stylesheet">
<!-- JavaScriptの読み込み -->
<script src="./scrollshutter.js"></script>
</head>次に、シャッターをかけたいエレメントを、syncer---scrollshutterというクラス名が付いたdivで囲んで下さい。複数でもかまいません。囲んだ全ての要素に、シャッターがかかるようになります。ちなみにクラス名は、後述するオプションで変更することができます。
HTML
<!-- シャッターをかけたい場所を[.syncer---scrollshutter]で囲む -->
<div class="syncer---scrollshutter">
<!-- Google Mapsなど -->
<div id="map-canvas"></div>
</div>仕上げです。body要素の最後あたりで、ScrollShutterを起動するためのJavaScriptを記述して下さい。これだけで、実装完了です。スクロールした時に、実際にシャッターがかかるようになったか確認してみて下さいね。
HTML
<body>
...
<script>
// [ScrollShutter]を起動する
ScrollShutter.init() ;
</script>
</body>オプション
あなたのサイトに最適化するために、起動する際に、引数にオプションオブジェクトを指定することができます。
JavaScript
ScrollShutter.init( {
breakPoint: 768 , // 768px以上の画面幅では利用しない
className: "syncer---scrollshutter" , // シャッターをかけるクラス名
closeTime: 200 , // スクロール完了後、何ミリ秒後にシャッターを外すか？
} ) ;指定できるオプションは、下記の3つです。
| プロパティ名 | 説明 | 初期値 |
|---|---|---|
| breakPoint | ここで指定したピクセル以上の画面幅のブラウザでは、シャッターをかけません。スマホやタブレットでのみ適用したい場合などに利用します。 | 0 |
| className | シャッターを適用するクラス名を独自のものにしたい場合は、指定して下さい。スタイルシートを変更する必要はありません。 | syncer---scrollshutter |
| closeTime | スクロールが止まってから、何ミリ秒後にシャッターを解除して操作可能にするかを指定して下さい。 | 200 |
オプションはどれも省略可能です。例えば、スマホ(479px以下)でだけシャッターをかけたい場合は、breakPointプロパティの値だけを指定すれば、大丈夫です。
JavaScript
ScrollShutter.init( {
breakPoint: 480 , // 480px以上の画面幅では利用しない
} ) ;メソッド
ScrollShutterには、4つのメソッドがあります。基本的にinit以外を使う機会はあまりないと思いますが、あなたのサイト内の他のJavaScriptと連携したい場合にご利用下さい。なお、init()は、destroy()を挟まずに重ねがけできます。
| メソッド名 | 説明 |
|---|---|
| init() | ScrollShutterを初期化します。引数には、オプションとなるオブジェクトを指定できます(省略可)。これを実行した時点で存在する要素に対してシャッターがかかるようになります。動的にエレメントを増やした場合は、再度、実行して下さい。 |
| destroy() | ScrollShutterを停止(破棄)します。スクロールイベントが削除され、以降、シャッターがかかりません。 |
| open() | 全エレメントのシャッターを解除します。 |
| close() | 全エレメントにシャッターをかけます。 |
ScrollShutterを停止したい場合は、次のようにdestroy()メソッドを使って下さい。
JavaScript
// ScrollShutterを停止する
ScrollShutter.destroy() ;