互換モードに対応したスクロール位置取得 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 Chromeがhtml.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や空文字が戻るような場合のプロパティは注意。