※ 2018/03/20 新しいブログへ移行中http://kazunori-toybox.com/blog/

ページスクロールして最下部まで行ったら次のページを読み込む方法

先日の記事にも書いたが ページスクロールで
最後までスクロールしたら次のページを読み込むようにした。
強引ではあるがその解説。

以下のサイトを参考にしました。

jQuery の位置・サイズ関連メソッドまとめ
http://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01

判定したいのは、「ページの最後までスクロールしたかどうか」である。
その判定に必要な物が、
 ・スクロール量
 ・html自体のサイズ
 ・現在のウィンドウのサイズ

htmlのサイズ = スクロール量 + 現在のウィンドウのサイズ

このデータを jQueryで取得し判定すると以下のようになる。

$(window).scroll(function() {
    var bottom = $(window).scrollTop() + $("html").attr('clientHeight');

    if (bottom >= $(document).height() - 60) {
        // ここにページ読み込みの関数を設定
    }

    // デバッグ用にテキスト表示
    $("#debugWidth").text(
        'scrollTop:' + $(window).scrollTop() +
        ' clientHeight:' + $("html").attr('clientHeight') +
        ' hegiht:' + $(document).height()
    );
});
スクロール量
$(window).scrollTop()
html自体のサイズ
$(document).height()
現在のウィンドウのサイズ
$("html").attr('clientHeight')

スクリプト内で「-60」しているが、これは i-phoneの safariで確認した所。 60ピクセル分のオフセットがあったからだ。

IE8、Firefox3.6.8 での動作を確認済みである。
動作は以下のアプリから確認ができる。

Amazon検索 for Smartphone
http://kazunori.watson.jp/tools/AmazonSearch/smartphone.html

本当はもうちょっとちゃんとしたいけど 実装したい機能と同様の動作をしているので
今のところこれでOKとしました。


  1. コメントはまだありません。

  1. 2010年 9月26日
    トラックバック先 :mi-ko
  2. 2011年 9月26日
    トラックバック先 :わかめにゅーす(Javascript)
  3. 2011年 11月8日
    トラックバック先 :雀七
  4. 2012年 5月16日
    トラックバック先 :ふぁぼりん@こさりん
  5. 2012年 6月4日
    トラックバック先 :mau_mau

This blog is kept spam free by WP-SpamFree.