JavaScriptおれおれAdvent Calendar 2014 – 21日目

よくある処理についてまとめました。

スクロールの監視

windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。

$(window  ).on('scroll', function(event){ console.log('window'); });
$(document).on('scroll', function(event){ console.log('document'); });  // IE 8では呼ばれない

スクロール位置の取得

document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElementはHTML要素の事。ただし、WebKitだけBODY要素から、document.body.scrollTopで得る必要があります。

一度だけ取得するならこんなコードで。

var scrollTop = document.documentElement.scrollTop || documentElement.body.scrollTop;

何度も取得するなら、要素を事前にキャッシュしておくと良いかと。

var elScrollable;
if (navigator.userAgent.indexOf('WebKit') < 0) {
    elScrollable = document.documentElement;
}
else {
    elScrollable = document.body;
}

var scrollTop = elScrollable.scrollTop;

ページ最下部へのスクロール到達判定

「スクロール位置 + 画面高さ」が「ページ高さ」と等しくなれば、最下部へ到達したものと考えます。

画面高さの取得

(さらに…)