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 {
         // それ以外
     }
});

JavaScript 選択範囲を復元する

頻繁に使うことはないですが, WYSIWYGエディタの実装などでは使うこともあるかと思います.

まず, テキストを選択している状態で以下のスクリプトを実行して, 選択範囲を保持します.

var selection = window.getSelection();
var range = null;

if (selection.rangeCount > 0) {
    range = selection.getRangeAt(0);
}

次に, テキストの選択を解除している状態で以下のスクリプトを実行して, 選択範囲を復元します.

selection.removeAllRanges();
selection.addRange(range.cloneRange());

ポイントは, 選択範囲を復元するときに, いったんすべての選択範囲を解除する (selection.removeAllRanges()) ことです.
この処理がないと, selection.addRange(range.cloneRange()) したときに,

Discontiguous selection is not supported.

つまり, 不連続な選択はサポートされていないというエラーが発生してしまいます.