読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

画面が一番下までスクロールされたら処理をする

javascript jQuery

気がついたら3月もなかばでしたね。2月は一度もブログを書いてなかったことになるけど、気にしないよ。
さて、タイムライン系の画面でよくある画面が一番下までスクロールされたら次のページを読み込む的なものってあるよね。jQueryでさっくり書いてみたので、忘れた頃にまた見なおすことにするよ。プラグインにして使いまわすのが良いんだろうけどね。
本題とは別だけど、フッターに操作や重要な情報がある場合にこの下の方までスクロールしたら次をロードする仕組みを入れるとたどり着けなくなってイラッとするから用法には注意するべきだと思うね。特にモバイルの場合とかは。

$(function() {
    $(window).scroll(function(ev) {
        var $window = $(ev.currentTarget),
            height = $window.height(),
            scrollTop = $window.scrollTop(),
            documentHeight = $(document).height();
        if (documentHeight === height + scrollTop) {
            // 一番下だよ
            alert('一番下だよ');
        }
    });
});

という訳で、一番下まできたらロードする処理を呼べば解決。一番下までじゃない場合(例えばフッターまで行かずにロードしたい)には、if文を多少変更すれば良いはずです。だたし、スクロール中に何度もロード処理が呼ばれないように気をつけてください。フラグなどでロード中であるか判定する必要はありそうだね。