スクロールで要素が「見えた」イベントを利用可能にするjQueryプラグイン

最近、Twitterみたいに一番下までスクロールした際に、自動で次のツイートを読み込んだりしたりするサイトをよく見ませんか？

このように、「一番下までスクロールしたら何かしたい」っていう場合。

これをイベントとして提供してくれるjQueryプラグインを紹介します。

一番下までスクロールした際に「次のページを読み込んで追加する」って仕様に限定されるのであれば、Infinite Ajax Scroll, a jQuery plugin なんかが便利だと思います。

しかし、読込の実装がちょっと普通じゃなく、読み込み部分は自分で実装したいとか、そもそも読込はしないで何か別の実装をしたい、といったケースもあります。

そこで便利なのが

というjQueryプラグインです。

使ってみたサンプルはこちら

使い方は簡単で

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./jquery.inview.min.js"></script>

注意点としては「可視状態」になったというイベントをハンドルするので、「リストの最後の要素」といったものに対してイベントをbindすることですね。

「スクロールが一番下までされた」、というわけではないです。

一番下までスクロールされた結果、最後の要素が「見えた」イベントです。

例

$("ul li:last-child").bind('inview', function(event, isInView, visiblePartX, visiblePartY) { 
    // 処理 
});

可視イベントはいろんな事に使えます。

通信以外にも、アラート的なものを出したり、ちょっとした仕掛けをしたり、既読管理をしたり。

もし、そのようなものを探している方がいましたら、お役に立てると嬉しいです。

以上です。

Aozora, LLC