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

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

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

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

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

Promiseを使った非同期処理

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