カテゴリー別アーカイブ: ライブラリ

jQuery ページ下部にスクロールしたことを検知する

Infinite ScrollのようなUIを実装する場合に必須となるので備忘録的に…

$(window).scroll(function() {
     var documentHeight = $(document).height();
     var scrollPosition       = $(window).height() + $(window).scrollTop();
     var diff                       = documentHeight - scrollPosition;

     if (diff <= 50) {
         // ページ下部から, 50px以内にスクロールした場合
     } else {
         // それ以外
     }
});

理屈は簡単で,

  1. ドキュメントの高さを取得
  2. (ウィンドウの高さ + 縦スクロール位置) の値との差分をとる
  3. 差分が閾値以内かどうかを判定

ちなみに, 以下のような閾値の判定もできます.

$(window).scroll(function() {
     var documentHeight = $(document).height();
     var scrollPosition       = $(window).height() + $(window).scrollTop();
     var rate                      = (documentHeight - scrollPosition) / documentHeight;

     if (rate <= 0.05) {
         // ページ下部から, ドキュメントの高さの5%以内にスクロールした場合
     } else {
         // それ以外
     }
});

jQuery UIのコンポーネントをAngularJSのカスタムディレクティブでラップしてみた

jQuery UIのコンポーネントといっても数が多いので, とりあえず, 自分がよく利用する, Slider / Spinner / Dialog の3つを, AngularJSのカスタムディレクティブを利用してラップしたモジュールを作成してみました.

jQueryプラグイン フリップスイッチのバージョンアップ

jQueryプラグイン フリップスイッチ

最初のバージョンでは, <div>タグなど, ブロックレベルのタグにしか適用できなかったのですが, 今回のバージョンからは, チェックボックス, つまり, <input type=”checkbox” />に対しても適用できるようになりました. といっても, 使い方は変わりません.

近い将来, セレクトメニュー (<select>タグ) に対しても適用できるようにする予定です.