コンテンツの下限近くまでスクロールされたことを知る jQuery プラグイン

Permalink URL
http://www.magicvox.net/archive/2010/11061735/
Posted by
ぴろり
Posted at
2010/11/06 17:35
Trackbacks
関連記事 (0)
Comments
コメント (3)
Post Comment
コメントできます
Category
ソフトウェア カテゴリ
カバーイメージ

　ページを下の方にスクロールしていくと、ある程度、ページの下限まで近づいた時点で、続きのコンテンツを読み込むようなギミックを簡単に実装できるようにします。判りやすい例としては、Twitter のタイムラインがあります。ブラウザのスクロールバーに注意しながら、ページをスクロールさせてみてください。スクロールバーがページの下限に近づいた時点で、続くタイムラインが追加的に読み込まれていることがわかると思います。

このエントリーをはてなブックマークに追加  

ソースコードの例

jQuery('#textarea').whenScrollBottom (function () {
	// some processes
	this.restartScrollBottom();
});

メソッド

jQuery.whenScrollBottom (func [, option])
　スクロールバーを持つ任意のオブジェクトに対して、そのスクロールバーが下限に近づいた時に発火するファンクションを指定します。option は、動作条件を指定するためのハッシュで省略することができます。現在は snap パラメータが指定できます。
HTMLObject.restartScrollBottom ()
whenScrollBottom メソッドで指定されたファンクションを再び発火するように設定します。通常、whenScrollBottom で指定されたファンクションが発火した後は、重複して発火することを避けるため、イベントハンドラが除去されます。このメソッドは再びイベントハンドラを有効にします。

動作環境など

  • Mozilla Firefox 3.6.12、Microsoft Internet Explorer 8.0 で動作確認
  • jQuery 1.2.3 以上
  • ライセンスは jQuery に準じます。MIT または GPLv2 とします
このエントリーをはてなブックマークに追加  

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには？

寄せられたコメント (全 3 件中、最新 5 件まで表示しています)

Posted by
ぴろり ◆OLEEi.VOX.ぴろり ◆OLEEi.VOX.
at
2010/12/12 17:12
ID
HeI8pRhk
今回の改造でブラウザの互換性がなくなりました｡･ﾟ･(ﾉ∀`)･ﾟ･｡
Firefox：jQuery(document).whenScrollBottom (...)
IE：jQuery(window).whenScrollBottom (...)
Posted by
ぴろり ◆OLEEi.VOX.ぴろり ◆OLEEi.VOX.
at
2010/12/12 13:35
ID
HeI8pRhk
＞ブラウザ自体のスクロールバーに対応させることは可能でしょうか？
jQuery(document).whenScrollBottom (...) で動作するようにしました。お手数ですが、もう一度、デモのアーカイブをダウンロードしてください。
Posted by
sundaysunday
at
2010/12/01 01:15
ID
O2cjrLEQ
ブラウザ自体のスクロールバーに対応させることは可能でしょうか？
全てのコメントを見る (全 3 件)

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。