7cc@はてなブログ

JavaScriptとかとか

互換モードに対応したスクロール位置取得 pageYOffset, pageXOffsetが使えないとき

かなり無駄があったので修正 2014/09/24
MDNに記載されているのは互換モードに対応していなかったので。

基本的に以下のようになるが、CSS次第で変わる。 詳しくは スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意を参照

browser page-scrolled
Quirks Mode body.scrollTop
IE8 html.scrollTop
IE9 html.scrollTop, pageYOffset
Webkit body.scrollTop, pageYOffset
Firefox html.scrollTop, pageYOffset

追記: 最近Google Chromehtml.scrollTopでスクロール量を返すようになった。しかし、内部的にはbody.scrollTopを返しているだけの模様。何にせよ、pageYOffsetが使えるのでそれで済む。

スクロール量を得るコード

var win = window 
  , doc = win.document
  , supportPageOffset = typeof pageXOffset === "number"
  , isStandards = document.compatMode === "CSS1Compat"
  , docElem = doc.documentElement
  , body = doc.body

function getScrolled() {
  if (supportPageOffset) {
    return {x: pageXOffset, y: pageYOffset}
  } else if (isStandards ) {
    return {x: docElem .scrollLeft, y: docElem.scrollTop}
  } else {
    return {x: body.scrollLeft, y: body.scrollTop}
  }
}

余談

window.pageYOffset が使えるか判別するときは、数字かどうかチェックする。0や空文字が戻るような場合のプロパティは注意。