要素が表示されたら関数を実行する jquery.showuptrigger


業務で必要だったので、ちょっとした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 … コールバック関数を指定します

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

関連する記事


コメントする

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください