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

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …