無限スクロールのプラグイン「jScroll」の使い方

| カテゴリー : JavaScript Web制作ノウハウ

今回はWordPressの記事一覧ページや、記事詳細ページ( 記事分割も対応 )でスクロールすると次から次へとページが読み込まれる無限スクロールの実装方法について紹介します。

プラグインを使うと簡単に実装できるのでおすすめです。

アイドットデザインのメンバーが更新しているWebデザインギャラリーWow! Worksは無限スクロールを実装しています。( 今回使うプラグインとは別のものですが実装方法はほぼ同じです )

完成イメージはこのようになります。

それではいきましょう!

jScroll 無限スクロールプラグイン

今回使うプラグインはjScrollです。
名前からスクロールしそうですが、プラグイン名がシンプルなので参考記事が見つかりにくいです。
検索するときは、Googleの検索演算子を使って必要な情報を取捨選択してください。

読み込み時のストレスが少なく、動作も軽いのでおすすめのプラグインです。

やり方は簡単で、CDNまたはローカルのファイルを指定して読み込みます。
jQueryを読み込んでから使います。

JavaScriptではこんな感じで起動するだけ。

実際に使う際のカスタマイズ

では実際に使う際のオプションの設定をみてみましょう。
以下のようなHTMLで進行します。

DOMがレンダリングされている状態で下記の記述をすることで、無限スクロールの完成です。

「contentSelector」のオプションを指定することで、ヘッダー・フッターはそのままで指定したコンテンツのみ読み込むことが可能です。これにより、無限スクロールっぽくすることができます。
オプションには「callback」もあるので、読み込んだコンテンツ内のJSを再発火できます。広告等を貼っているサイトや、記事にJSが動くコンテンツがあるサイトでも安心です。

静的ではもちろん、WordPress等の動的なサイトでも次のページのURLを動的に変更することで問題なく動きます。

WordPressで使用する際のサンプル

実際に使う際はWordPressなどのCMSと一緒に使うシーンが多いのではないでしょうか。
先ほどのHTMLをsingle.phpを前提に書き換えてみました。

前の記事にどんどん遡るようにリンクを取得しています。

これでWordPressでも無限スクロールが可能になりました。
記事の一覧ページでもすることは同じで、次のページのURLを指定すれば問題ありません。

記事詳細ページで記事分割がある場合は、次のページのURLの部分を記事分割のURLに変更すれば動きます。

まとめ

カスタマイズがとてもしやすいプラグインなので、色々と試してみてください。
jScrollは他の無限スクロールプラグインよりもさくさく動いて、次のページを読み込む際も動作が軽い気がするので使っています。

ご使用の際は、利用規約は必ずご確認ください。

儲かる会社はやっている!小さな会社のホームページ集客の鉄則

無料の資料をダウンロード

×

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。