実装簡単！スマホにも対応のセクションスクロールができるスクリプト【Scrollify.js】
section要素やdiv要素が垂直に配置された縦長ページをスクロールしたときに、各セクションを画面のトップ位置にスナップさせるjQueryのプラグイン「Scrollify.js」のオプションなど細かく解説します。
パソコンのホイール操作はもちろん、スマートフォンやタブレットなどのタッチ操作にも対応していて、とても便利です。
また、セクションがウィンドウの表示領域に収まらなくても、セクション内でスクロールができるというのも、魅力の1つです。
Scrollify.js デモ
パソコン、スマートフォン、タブレットなど、いろいろな端末で確認してみてください。
Scrollify.js 使い方
手順1
まずはGitHubでscrollify.jsとeasing.jsを一式ダウンロードし、jqueryと一緒に＜/body＞の直前で読み込みます。
|
1 2 3 4 5 6 7 |
<body> ・・・ ・・・ <script src="script/jquery-1.11.1.js"></script> <script src="script/jquery.easing.1.3.js"></script> <script src="script/scrollify.js"></script> </body> |
手順2
スクロールさせたいセクションをすべて同じ要素(sectionやdivなど)で実装します。
|
1 2 3 4 5 6 7 8 9 10 |
<body> <section>セクション1</section> <section>セクション2</section> <section>セクション3</section> <section>セクション4</section> <script src="script/jquery-1.11.1.js"></script> <script src="script/jquery.easing.1.3.js"></script> <script src="script/scrollify.js"></script> </body> |
手順3
各セクションに使用した要素(ここではsection)を指定し、スクリプトを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <section>セクション1</section> <section>セクション2</section> <section>セクション3</section> <section>セクション4</section> <script src="script/jquery-1.11.1.js"></script> <script src="script/jquery.easing.1.3.js"></script> <script src="script/scrollify.js"></script> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </body> |
ここまでが基本的な使い方です。
Scrollify.js オプション
ここからは詳細な設定ができるオプションを紹介していきます。
| section | ページのセクションのCSSセレクター。 スクロールしたいセクションのidやclassを入れます。 |
|---|---|
| sectionName | 各セクションにつけるデータ属性の名前を変更します。 デフォルトはdata-section-name。 |
| interstitialSection | ヘッダーやフッターなどのフルハイト以外のセクション用のCSSセレクター。 |
| easing | イージングメソッドを定義します。 easing.jsの中から好きなものを選ぶことができます。 （easing参考：http://easings.net/ja） |
| scrollSpeed | offsetにスクロールする際のスピードの値。ミリ秒で設定します。 |
| offset | 各セクションの位置をオフセットするピクセル単位の距離。 デフォルトは0。 |
| scrollbars | スクロールバーを表示するかどうかを定義するブール値。 デフォルトはtrue。 |
| standardScrollElements | 標準スクロール動作を必要とするセクション内の要素のCSSセレクタ。 |
| setHeights | 各セクションに高さを割り当てるかどうかを定義するブール値。 デフォルトはtrue。 |
| overflowScroll | Scrollifyでセクション内のオーバーフローコンテンツのスクロールを許可するかどうかを定義するブール値。 デフォルトはtrue。 |
| updateHash | セクションをスクロールした際に、アドレスバーのURLを更新するかどうかを定義するブール値。 デフォルトはtrue。 |
| touchScroll | タッチスクロールイベントを処理するかどうかを定義するブール値です。 デフォルトはtrue。 |
| before | セクションがmoveメソッドを使用してスクロールされる前に発生するコールバック。 引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。 |
| after | 新しいセクションがスクロールされた後に起動されるコールバック。 引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。 |
| afterResize | ウィンドウがサイズ変更された後に起動されるコールバック。 |
| afterRender | 初期化後に起動されるコールバック。 |
おまけ
サイト内でサイズの大きい画像を使った際、そのままscrollifyを実行すると、画像が表示される前に高さを取得してしまい、セクション下部が切れることがあります。
そんなときはscrollifyを画像などがすべて表示された後に実行するように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> ・・・ ・・・ <script> $(window).load(function(){ $(function() { $.scrollify({ section : "section", }); }); }); </script> </body> |
5行目と11行目の部分を足すだけです。
すぐにわからなくてつまずいたのでメモがてら記載しました。scrollify以外でも使えそうですね。
