最近、Twitterみたいに一番下までスクロールした際に、自動で次のツイートを読み込んだりしたりするサイトをよく見ませんか?
このように、「一番下までスクロールしたら何かしたい」っていう場合。
これをイベントとして提供してくれるjQueryプラグインを紹介します。
一番下までスクロールした際に「次のページを読み込んで追加する」って仕様に限定されるのであれば、Infinite Ajax Scroll, a jQuery plugin なんかが便利だと思います。
しかし、読込の実装がちょっと普通じゃなく、読み込み部分は自分で実装したいとか、そもそも読込はしないで何か別の実装をしたい、といったケースもあります。
そこで便利なのが
というjQueryプラグインです。
使ってみたサンプルはこちら
使い方は簡単で
jQuery本体を読み込む
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jquery.inviewからソースをclone、又はダウンロードしてjquery.inview.min.js
を読み込む
<script type="text/javascript" src="./jquery.inview.min.js"></script>
あとは普通にjQueryとしてのイベントとして「inview」が使えるのでbindするなりonするなりすればOK
注意点としては「可視状態」になったというイベントをハンドルするので、「リストの最後の要素」といったものに対してイベントをbindすることですね。
「スクロールが一番下までされた」、というわけではないです。
一番下までスクロールされた結果、最後の要素が「見えた」イベントです。
例
$("ul li:last-child").bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
// 処理
});
まとめ
可視イベントはいろんな事に使えます。
通信以外にも、アラート的なものを出したり、ちょっとした仕掛けをしたり、既読管理をしたり。
もし、そのようなものを探している方がいましたら、お役に立てると嬉しいです。
以上です。