JavaScript を使用してドラッグ＆ドロップのようなプログラムを作成する場合は、
座標計算のためにブラウザのスクロール量を知りたいことがあります。
このようなときに使えそうなプロパティとして、次の4つを見つけることが出来ました。
（とりあえず垂直スクロールのみ）
- window.scrollY
- window.pageYOffset
- document.body.scrollTop
- document.documentElement.scrollTop
これらの値は、次の条件から影響を受けて変化します。
4つのプロパティについて、ブラウザが返す値を調べた結果を掲載します。
期待される値（スクロール量）が返された場合は YES
を記入してあります。
この調査に使用したプログラムについては 調査方法
を参照してください。
DOCTYPE を指定しない「後方互換(Quirks)モード」の場合
|
Firefox 2.0
Firefox 1.5 |
Opera 9 |
Safari 3.0β |
IE 7
IE 6 |
| window.scrollY |
YES |
undefined |
YES |
undefined |
| window.pageYOffset |
YES |
YES |
YES |
undefined |
document
.body.scrollTop |
YES |
YES |
YES |
YES |
document
.documentElement
.scrollTop |
常に0 |
YES |
常に0 |
常に0 |
DOCTYPE で「標準準拠(Standards)モード」を指定した場合
|
Firefox 2.0
Firefox 1.5 |
Opera 9 |
Safari 3.0β |
IE 7
IE 6 |
| window.scrollY |
YES |
undefined |
YES |
undefined |
| window.pageYOffset |
YES |
YES |
YES |
undefined |
document
.body.scrollTop |
常に0 |
YES |
YES |
常に0 |
document
.documentElement
.scrollTop |
YES |
YES |
常に0 |
YES |
これらの結果を見ると、ここで取り上げたブラウザのみ考慮するのであれば、
次の2つのプロパティのうちどちらかが真の場合にのみ有効な値とみなせば良い事が分ります。
- document.body.scrollTop
- document.documentElement.scrollTop
また、スクロールされていない場合は 0 を取得したいので、これも考慮すると、
ブラウザのスクロール量を取得するコードは次の様になります。
// 水平スクロール量
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
// 垂直スクロール量
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
調査方法
検証ページを表示して、ページの最後までスクロールさせます。
そうすると [垂直スクロール量を取得] ボタンが現れるので、
これをクリックするとプロパティの値が表示されます。
検証ページへのリンク
ソースコード
ここでは「標準準拠(Standards)モード」のソースコードを掲載します。
1行目の DOCTYPE の行を削除すると「後方互換(Quirks)モード」用になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直スクロール量を取得</title>
</head>
<body>
<script type="text/javascript">
function result()
{
var elm;
elm = document.getElementById("compatmode0");
elm.innerHTML = document.compatMode;
elm = document.getElementById("compatmode1");
switch (document.compatMode) {
case "BackCompat":
case "QuirksMode":
elm.innerHTML = "後方互換(Quirks)";
break;
case "CSS1Compat":
elm.innerHTML = "標準準拠(Standards)";
break;
default:
elm.innerHTML = "不明";
break;
}
elm = document.getElementById("result0");
elm.innerHTML = window.scrollY;
elm = document.getElementById("result1");
elm.innerHTML = window.pageYOffset;
elm = document.getElementById("result2");
elm.innerHTML = document.body.scrollTop;
elm = document.getElementById("result3");
elm.innerHTML = document.documentElement.scrollTop;
}
</script>
<p>このページの最後までスクロールさせてください。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr/>
<p><button onclick="result()">垂直スクロール量を取得</button></p>
<table border="1">
<tr><td>document.compatMode</td><td id="compatmode0">-</td></tr>
<tr><td>後方互換(Quirks)／標準準拠(Standards)</td><td id="compatmode1">-</td></tr>
<tr><td>window.scrollY</td><td id="result0">-</td></tr>
<tr><td>window.pageYOffset</td><td id="result1">-</td></tr>
<tr><td>document.body.scrollTop</td><td id="result2">-</td></tr>
<tr><td>document.documentElement.scrollTop</td><td id="result3">-</td></tr>
</table>
</body>
</html>
|
改版履歴
| 日付 |
内容 |
| 2007-06-14 |
［調査対象］ Swift 0.1→Safari 3.0β（結果に変更なし）
|
| 2007-01-11 |
［調査対象］ Firefox 2.0β2→Firefox 2.0, IE 7 RC1→IE 7
［追加］ 後方互換(Quirks)モード、標準準拠(Standards)モード の表記を追加 ／
ソースコードの修正（モードの検出を追加） ／
検証ページへのリンクを追加 ／
関連リンクを追加
|
| 2006-09-18 |
DOCTYPE スイッチでプロパティの値が変わる。
|
| 2006-09-10 |
［調査対象］ Firefox 2.0β2, Opera 9β2→Opera 9, Swift 0.1, IE 7β2→IE 7 RC1
|
| 2006-05-25 |
［調査対象］ Firefox 1.5, Opera 9β2, IE 7β2, IE 6
|
