Webブラウザのウインドウのスクロール量を取得する.md

Webブラウザのウインドウのスクロール量を取得する.md

Webブラウザのウインドウのスクロール量を取得する

概要

ウインドウのスクロール量を取得するクラスブラウザなコードを考えます。

Window#scrollY, Window#pageYOffset

• 4. Extensions to the Window Interface - CSSOM View Module (Draft)
• 4. Window インタフェースに対する拡張 - CSSOM View Module （日本語訳）

CSSOM View Module では次のプロパティが定義されています。

• Window#scrollX … 横方向(X軸)のスクロール量を返します
• Window#scrollY … 縦方向(Y軸)のスクロール量を返します
• Window#pageXOffset … 横方向(X軸)のスクロール量を返します (Window#scrollX と同値となります)
• Window#pageYOffset … 縦方向(Y軸)のスクロール量を返します (Window#scrollY と同値となります)

Window#scrollY と Window#pageYOffset の返り値は同値ですが、両方テストして成功値を返す実装が安全でしょう。 MDN, MSDN によれば、主なブラウザのサポート状況は下記になります。

• Window.scrollY - Web APIs | MDN
• Window.pageYOffset - Web APIs | MDN
• pageYOffset property (Internet Explorer)

プロパティ	Chrome	Firefox	IE	Edge	Opera	Safari
scrollY(Basic Support)	Yes	Yes	No	Yes	Yes	Yes
scrollY(Subpixel precision)	?	55	No	?	?	?
pageYOffset(Basic Support)	Yes	Yes	9	?	Yes	Yes

※上の互換表はモバイルブラウザの情報を除いており、MDNではサポート状況が不明なブラウザがいくつかあります。

document.documentElement.scrollTop

Window#scrollY, Window#pageYOffset に対応しないブラウザ向けにルート要素(html要素)の scrollLeft, scrollTop プロパティ値を参照します。

document.documentElement.scrollLeft; // 横方向(X軸)のスクロール値を得る (標準準拠モード)
document.documentElement.scrollTop;  // 縦方向(Y軸)のスクロール値を得る (標準準拠モード)

ただし、DOCTYPEスイッチが後方互換モードの場合は次のように書かなければなりません。

document.body.scrollLeft; // 横方向(X軸)のスクロール値を得る (後方互換モード)
document.body.scrollTop;  // 縦方向(Y軸)のスクロール値を得る (後方互換モード)

クロスブラウザなコード

総合すると、次のコードとなります。

• Webブラウザのウインドウのスクロール量を取得する - JSFiddle

function getScrollX (window) {
  if ('scrollX' in window) {
    return window.scrollX;
  }

  if ('pageXOffset' in window) {
    return window.pageXOffset;
  }

  var doc = window.document;

  return doc.compatMode === 'CSS1Compat' ? doc.documentElement.scrollLeft : doc.body.scrollLeft;
}

function getScrollY (window) {
  if ('scrollY' in window) {
    return window.scrollY;
  }

  if ('pageYOffset' in window) {
    return window.pageYOffset;
  }

  var doc = window.document;

  return doc.compatMode === 'CSS1Compat' ? doc.documentElement.scrollTop : doc.body.scrollTop;
}

addEventListener('scroll', function handleScroll (event) {
  var window = event.currentTarget;

  console.log('scrollX:' + getScrollX(window) + ' / scrollY: ' + getScrollY(window));
}, false);