skillup

技術ブログ

JavaScript

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

投稿日:

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。)

infinte scroollというライブラリです。名前そのまんまですね・・・)

公式

https://github.com/metafizzy/infinite-scroll

インストール

bowerに下記のように書いてもいいですし、公式サイトからそのままダウンロードしてもOK。

使い方(※もっといろいろありますが、必要最低限のもの)

JavaScript

HTML

これで下にスクロールすると自動的にページリンクをクリックしていくかのようにページが遷移される感じになります。

注意点

dataTableと違って非常に簡単な反面、次へのページリンクに数字が入っていないとだめっぽいです。これに気づくまでに結構時間かかりました・・・。普通のページャーを使っていて無限スクロールに切り替えたい場合便利だと思います。

参考リンク

http://on-ze.com/archives/2486
https://www.webprofessional.jp/jquery-infinite-scrolling-demos/
 http://xn--cakephp-gt4fral1s5v.jp/auto-scroll/

 

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …