JavaScriptメモ: Web ブラウザのページ表示位置を調べる（スクロール位置を取得する）

2018-05-19

ウィンドウ（表示領域）上端の座標を取得する

Web ブラウザで今表示されている部分（ビューポート）の位置、つまり現在のページのスクロール量を調べるには、以下のようにします。

プレーンな JavaScript の例 (Vanilla JavaScript)

window.addEventListener('scroll', (event) => {
  console.log(window.pageYOffset);  // 縦方向のスクロール量
  console.log(window.pageXOffset);  // 横方向のスクロール量
});

ここでは、スクロール時のイベントをハンドルして、座標表示を更新しています。

pageYOffset の代わりに新しい scrollY プロパティを使用することもできます。新しいブラウザのほとんどは scrollY プロパティもサポートしているので、scrollY を使ってもよいでしょう。互換性を重要視する jQuery などの実装では、pageYOffset を使用しているようです。

デモ（別ウィンドウで開く）

上記のデモでは、ページをスクロールすると、スクロール後の表示位置がウィンドウ左上に表示されます。

jQuery を使った例

jQuery を使った場合も、ほぼ同じように記述できますが、プレーンな JavaScript でももともと簡単なので、jQuery を使用する意味はほとんどありません（パフォーマンスが悪くなるだけ）。

$(() => {
  const $wnd = $(window);
  $wnd.scroll(() => {
    console.log($wnd.scrollTop());   // 縦方向のスクロール量
    console.log($wnd.scrollLeft());  // 横方向のスクロール量
  });
});

ウィンドウ下端の座標を取得する

window.pageYOffset (scrollY) や window.pageXOffset (scrollX) は、表示領域左上の座標しか取得できませんが、window.innerHeight や window.innerWidth を使ってウィンドウサイズを取得すれば、表示領域右下の座標を計算することができます。

window.addEventListener('scroll', (event) => {
  const right = window.pageXOffset + window.innerWidth;
  const bottom = window.pageYOffset + window.innerHeight;
  console.log(right + ', ' + bottom);
});

window.innerWidth には垂直方向のスクロールバーを含んだウィンドウ幅が格納されています。 jQuery の $(window).width() を使用すると、スクロールバーのサイズを除いたウィンドウ幅を取得することができます。

2018-05-19