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