今回、Wordpress 用プラグイン WP-AutoPager を作成した際、色々調べ物をしたことの自分用のまとめ。
マウスカーソル位置を監視する関数を実装したのだが、ブラウザの表示領域を取得するプロパティが DOCTYPE 宣言の有無、ブラウザの違いで違ってくるよと言うお話。

<!DOCTYPE > 宣言の有無によって、ブラウザが標準または互換モードで動作するのだが、その時参照すべきプロパティがブラウザによって変わってくる。
しかも IE6 の場合は <!DOCTYPE > 宣言は必ず１行目に無いとダメ。
<?xml version="1.0″ encoding="UTF-8″?> なんて XML 宣言が先頭に書いてあると後方互換モードになってしまいます orz

スクロールバーで隠れている領域を含むサイズが取得できるプロパティ

表示領域のサイズが取得できるプロパティ

実装

で、結局実装したコードが以下のような感じ

// スクロールバーで隠れている領域を含む全体の高さ
var height = (document.documentElement && document.documentElement.scrollHeight ? document.documentElement : document.body).scrollHeight;

// スクロールバーで隠れている領域を含む全体の幅
var width = (document.documentElement && document.documentElement.scrollWidth ? document.documentElement : document.body).scrollWidth;

// 表示領域の高さ
var clientHeight = (document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body ).clientHeight;

// 表示領域の幅
var clientWidth = (document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body ).clientWidth;

// 表示領域左上のＹ座標
var y = (document.documentElement && document.documentElement.scrollTop ? document.documentElement : document.body).scrollTop;

// 表示領域左上のX座標
var x = (document.documentElement && document.documentElement.scrollLeft ? document.documentElement : document.body).scrollLeft;

ブラウザのモード判定

ブラウザが標準モード、後方互換モードのどちらで動作しているか判定するには、document.compatMode を確認すればよいです。
コードは、こんな感じかな

if (document.compatMode && document.compatMode != "BackCompat") {
  // 標準モードで動作しているときの処理
} else {
  // 後方互換モードで動作しているときの処理
}

参考にしたサイト