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;
ページ最下部へのスクロール到達判定
「スクロール位置 + 画面高さ」が「ページ高さ」と等しくなれば、最下部へ到達したものと考えます。