Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

現在位置を取得するときのの基準となる、ウィンドウ・サイズ、ドキュメント・サイズ、スクロール量を取得するJavascript。ブラウザ互換とかで割りと苦労しました。

• スクロール量（横）:
• スクロール量（縦）:
• ウィンドウ・サイズ（横）:
• ウィンドウ・サイズ（縦）:
• ウィンドウの中央位置（横）:
• ウィンドウの中央位置（縦）:
• ドキュメント・サイズ（横）:
• ドキュメント・サイズ（縦）:

以下にソースを出します。

スクロール量を取得

1. function getScrollPosition() {
2. var obj = new Object();
3. obj.x = document.documentElement.scrollLeft || document.body.scrollLeft;
4. obj.y = document.documentElement.scrollTop || document.body.scrollTop;
5. return obj;
6. }

memo: Safariではscroll系が未対応なので、巧く値が取れないみたいです。う～ん ＾＾；

ウィンドウ・サイズを取得

1. function getScreenSize() {
2. var obj = new Object();
3. if (!isSafari && !isOpera) {
4. obj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
5. obj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
6. } else {
7. obj.x = window.innerWidth;
8. obj.y = window.innerHeight;
9. }
10. obj.mx = parseInt((obj.x)/2);
11. obj.my = parseInt((obj.y)/2);
12. return obj;
13. }

上記に必要なUser Agentを判別する処理が、以下。

1. var isWin9X = (navigator.appVersion.toLowerCase().indexOf('windows 98')+1);
2. var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
3. var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0);
4. if (isOpera) isIE = false;
5. var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);

ドキュメント・サイズを取得

1. document.body.offsetWidth;
2. document.body.offsetHeight;
3. document.documentElement.scrollWidth || document.body.scrollWidth;
4. document.documentElement.scrollHeight || document.body.scrollHeight;

2008.10.28 追記: offsetWidthでは画面表示領域しか取れなかったので、scrollWidthに修正。表示モードによって取り方が違うほか、ウィンドウサイズより実体が小さい場合にはそっちの値が出るので、注意が必要です。

関連項目

• マウス座標を取得する

参考サイト

• scottschiller.com v4
• ブラウザのスクロール量を取得するには？, Diaspar Jounal
• ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法, Enjoy*Study