jScrollの導入方法と使い方をご紹介！
jScrollの導入方法と使い方をサンプルコード付きでご紹介します。jScrollを用いると無限スクロールできるようになり、ユーザーに大量の情報を簡単に共有させることができるようになります。ではその内容を見ていきましょう。
jScrollとは？
jScrollを用いると無限スクロールできるようになり、ユーザーに大量の情報を簡単に共有させることができるようになります。
jScrollによってページ遷移することなくスクロールのみで実現するため、特にスマートフォンやタブレットなどの利用にも適しています。
jScrollの導入方法
jScrollの導入方法としてはダウンロードする方法とCDNを読み込む方法の2パターンあります。
ダウンロードする方法
まず以下のサイトでダウンロードしてください。
次にダウンロードしたファイルから「jquery.jscroll.min.js」とjQueryを読み込むと、jScrollの実装は完了です。
この時必ずjQueryのCDNの方を先に読み込んでください。
CDNを用いる場合
jScrollのCDNは以下になります。
jScrollのCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>こちらをjQueryを読み込んだ後に、読み込んでいただくと導入は完了です。
jScrollの使い方
ではjScrollの使い方について解説します。
HTMLで無限スクロールさせたい部分をdiv要素などで囲んで、適当なclassを付けてください。
またページごとにコードを分割して記述したい場合はその都度ファイルを分けてください。
そして最後a要素に無限スクロールされるようにhref属性に記述します。
ではサンプルコードを用意したので確認してみましょう。
このように無限スクロールできていることが分かります。
JSには
jScroll
$('無限スクロールさせたいコンテンツを囲むクラス名').jscroll();
と記述することでjScrollが使えます。
またjScrollには多くのオプションが存在します。
オプションの詳細については以下の記事にて解説しているので参照してください。
まとめ
いかがでしたでしょうか？
jScrollを用いることで、エンゲージメントを向上させたり、モバイル端末に最適であったりします。
ぜひここで紹介した方法を用いてjScrollを使ってみてください。
