skillup

技術ブログ

JavaScript

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

投稿日:2017年6月13日 更新日:

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

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

公式

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

インストール

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

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

JavaScript

HTML

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

注意点

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

参考リンク

【jQuery】無限スクロール[Infinite Scroll]を極限までカスタマイズ

どのやり方がいい? ブクマしておくと便利なjQuery無限スクロールまとめ

CakePHPクッキング 無限スクロールをさせる

 

-JavaScript
-

執筆者:


comment

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

関連記事

no image

新技術のメリットを理解したい場合(jQueryと比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …

no image

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

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

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …