jScrollのオプション一覧と使い方をご紹介!

jScrollのオプション一覧と使い方をサンプルコード付きでご紹介します。jScrollにはいくつかのオプションが存在します。その中でも特によく用いるものをピックアップして取り上げます。

コンテンツ [表示]

  1. 1jScrollのオプションを使いたい
  2. 2jScrollのオプション一覧と使い方
  3. 2.1jScrollのオプションの使い方
  4. 2.2jScrollの主要オプション
  5. 3まとめ

jScrollのオプションを使いたい

jScrollのオプションを使うことで、読み込む際の設定を行うことができたり、次の表示コンテンツの読み込みを自動にするか、それともボタンクリックにするかなどを設定することができます。

jScrollのオプションによりさらにユーザビリティのあるサイトになります。

Photo byStockSnap

jScrollのオプション一覧と使い方

ではjScrollのオプション一覧と使い方について解説します。

jScrollのオプションの使い方

jScrollのオプションは以下の箇所にオブジェクト形式で記述します。

jScrollのオプション

$('無限スクロールさせたいコンテンツを囲むクラス名').jscroll({
  //オプションを記述
  autoTrigger: true, //例
}); 

このように記述することでオプションを使うことができます。

jScrollの主要オプション

jScrollのオプション一覧については以下のサイトを参照してください。

jScrollのオプション一覧
jScrollのオプション一覧

ここではその中でもよく用いるオプションをピックアップして紹介します。

loadingHtml

loadingHtmlオプションを設定することで記事読み込み中の表示を変えることができます。

デフォルトでは「Loading」となっているものがこのように変更することができます。

autoTrigger

autoTriggerオプションを設定することで、次の表示コンテンツの読み込みを自動( true )にするか、ボタンクリック( false )にするかを設定することができます。

デフォルトではtrueとなっています。

falseとするとこのように「次の記事へ」をクリックしないと、ページが読み込まれません。

まとめ

いかがでしたでしょうか?

jScrollのオプションはそれほど多くはないので、全て使いこなしたいという方は上記のサイトの参照をお願いします。

ここでは主によく用いるオプションを紹介しました。

ぜひjScrollのオプションを用いて、よりサイトをユーザビリティの高いものにしてみてください。

GeekHive採用サイト

関連記事