業務で必要だったので、ちょっとしたjQueryプラグインを書きました。要素がスクロールによって表示されたタイミングで、ある処理を実行できるようにするプラグインです。

jquery.showuptrigger [@github]

使い方

jqueryのあとにshowuptriggerをインクルードします。

📄index.html

<script src="lib/jquery-1.11.2.min.js"></script>
<script src="showuptrigger-0.0.1.min.js"></script>

スクロールする要素に対してshowuptriggerプラグインを装着します。通常はwindowで構いませんが、overflow: scroll; にしているdivやtbodyなどの要素に対しても正常に動作します。

📄script.js

$('.scrollable-container').showuptrigger({
  trigger: '#last-element',
  callback: function() { alert('Welcome to the bottom!'); },
});

• trigger … この要素が表示されたらコールバックを実行します
• callback … コールバック関数を指定します

これだけです。オプションもこの２つしかありません。シンプル過ぎて複雑なことは何一つできませんが、ちょっとした用途であれば充分かと思います。

関連する記事

• jquery-ui.sortableでドラッグ中の要素の位置がおかしくなる
• ヘッダー固定でtbodyスクロール可・td幅残り全部のテーブルをサクッと作る
• [WithPopup] submitと同時にポップアップを開くRails用Gem
• Railsアプリを『浅く』パフォーマンス・チューニングしてみる（その３）
• ウィンドウリサイズに応じて要素をサイズ調整させるjQueryプラグイン