まくまくJavaScriptノート
Web ブラウザのページ表示位置を調べる（スクロール位置を取得する）
Web ブラウザで今表示されている部分（ビューポート）の位置、つまり現在のページのスクロール量を調べるには、以下のようにします。
window.addEventListener('scroll', function(event) {
console.log(window.pageYOffset); // 縦方向のスクロール量
console.log(window.pageXOffset); // 横方向のスクロール量
});
ここでは、スクロール時のイベントをハンドルして、座標表示を更新しています。
pageYOffset の代わりに新しい scrollY プロパティを使用することもできます。
新しいブラウザのほとんどは scrollY プロパティもサポートしているので、scrollY を使ってもよいでしょう。
互換性を重要視する jQuery などの実装では、pageYOffset を使用しているようです。
上記のデモでは、ページをスクロールすると、スクロール後の表示位置がウィンドウ左上に表示されます。
jQuery を使った場合も、ほぼ同じように記述できますが、プレーンな JavaScript でももともと簡単なので、jQuery を使用する意味はほとんどありません（パフォーマンスが悪くなるだけ）。
$(function () {
var $wnd = $(window);
$wnd.scroll(function() {
console.log($wnd.scrollTop()); // 縦方向のスクロール量
console.log($wnd.scrollLeft()); // 横方向のスクロール量
});
});
window.pageYOffset (scrollY) や window.pageXOffset (scrollX) は、表示領域左上の座標しか取得できませんが、window.innerHeight や window.innerWidth を使ってウィンドウサイズを取得すれば、表示領域右下の座標を計算することができます。
window.addEventListener('scroll', function(event) {
var right = window.pageXOffset + window.innerWidth;
var bottom = window.pageYOffset + window.innerHeight;
console.log(right + ', ' + bottom);
});
window.innerWidth には垂直方向のスクロールバーを含んだウィンドウ幅が格納されています。
jQuery の $(window).width() を使用すると、スクロールバーのサイズを除いたウィンドウ幅を取得することができます。
