jScrollのオプション一覧と使い方をご紹介!
jScrollのオプション一覧と使い方をサンプルコード付きでご紹介します。jScrollにはいくつかのオプションが存在します。その中でも特によく用いるものをピックアップして取り上げます。
jScrollのオプションを使いたい
jScrollのオプションを使うことで、読み込む際の設定を行うことができたり、次の表示コンテンツの読み込みを自動にするか、それともボタンクリックにするかなどを設定することができます。
jScrollのオプションによりさらにユーザビリティのあるサイトになります。
jScrollのオプション一覧と使い方
ではjScrollのオプション一覧と使い方について解説します。
jScrollのオプションの使い方
jScrollのオプションは以下の箇所にオブジェクト形式で記述します。
jScrollのオプション
$('無限スクロールさせたいコンテンツを囲むクラス名').jscroll({
//オプションを記述
autoTrigger: true, //例
});
このように記述することでオプションを使うことができます。
jScrollの主要オプション
jScrollのオプション一覧については以下のサイトを参照してください。
ここではその中でもよく用いるオプションをピックアップして紹介します。
loadingHtml
loadingHtml
オプションを設定することで記事読み込み中の表示を変えることができます。
デフォルトでは「Loading」となっているものがこのように変更することができます。
autoTrigger
autoTrigger
オプションを設定することで、次の表示コンテンツの読み込みを自動( true
)にするか、ボタンクリック( false
)にするかを設定することができます。
デフォルトではtrue
となっています。
false
とするとこのように「次の記事へ」をクリックしないと、ページが読み込まれません。
まとめ
いかがでしたでしょうか?
jScrollのオプションはそれほど多くはないので、全て使いこなしたいという方は上記のサイトの参照をお願いします。
ここでは主によく用いるオプションを紹介しました。
ぜひjScrollのオプションを用いて、よりサイトをユーザビリティの高いものにしてみてください。