facebook風の無限スクロールを実装するプラグイン「infinite scroll」

WEBサイトや、ブログ等の記事をページング機能ではなく、facebookのタイムラインのように無限スクロールで実装するプラグイン「infinite scroll」。

wordpressなどのブログ記事や、ECサイト等、様々なシーン活躍出来そうですね。

今後使いそうな予感がするので、覚え書き。

1.まずは、プラグインの準備

JQUERY本体をJQUERYの公式サイトから、infinite scrollをinfinite scroll配布ページの、ページ右下の「Download ZIP」ボタンからダウンロード。

まずは、JqueryとJavascriptの読み込み。

2.設定方法

プラグインの設定部分を記述。まずはプラグインを適用したい要素をセレクターに指定する。

※jQueryプラグインは、適用したい要素に、.(ドット)繋ぎでプラグイン名を書き、丸括弧”()”とセミコロン”;”を書くことで実行される。

3.オプションの指定

最後にオプションを指定。基本的な機能は以下の3つを指定すれば利用可能。

  • navSelector:次に読み込む要素を囲む要素を指定
  • nextSelector:次に読むこむ要素自体を囲む要素を指定
  • itemSelector:表示させたい要素を指定

その他のオプション。


  • debug:console.logに出力するデバッグメッセージを有効/無効にします
  • loadingImg:ローディング時に表示する画像のパスを指定します
  • loadingText:ローディング画像に添えるテキストの指定をします
  • animate:コンテンツのロード時にアニメーションさせるか指定します
  • extraScrollPx:次のコンテンツを読み込むまでのスクロール量をピクセル指定します
  • donetext:全てのコンテンツを表示し終わったら表示させるテキストを指定します
  • errorCallback:404ページがコールされたときや、これ以上のコンテンツがない場合の処理を指定します

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/フルスタックwebデザイナー

2009年1月よりフリーランスのディレクター/フルスタックWebデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。

アーカイブ