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

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …

no image

yarnコマンド

JSやフロント側のライブラリを使うときはnpmを使ってたんですが、2〜3年前ぐらいからyarnというコマンドも使われているので、ちょっと調査を。 Contents1 yarnとは?2 よく使いそうなコ …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

アーカイブ