Hack Your Design!

jQueryでページ最下部のスクロール時のイベントをキャッチする

ユースケースとしては、Twitterのタイムライン表示ページのように最下部までスクロールしたら、そのイベントをキャッチして次ページのツイートをAutoloadして表示させたい!みたいなとき。

$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    // when scroll to bottom of the page
  }
});

上コードでは、ウインドウのスクロール時にスクロール位置が今どれだけなのかを差分を見て計算してる。それが0以下になったら次ページを表示させるようなコードを書けばよい。

上記の例では「最下部」をイベントの発火ポイントにしたけど、「下記○○%に入ったら」とかでもよさそう。

参考

  • このエントリーをはてなブックマークに追加
comments powered by Disqus