ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。

[programming]

昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。

調査したのは、下記のプロパティです。

  • window.innerWidth
  • window.innerHeight
  • document.body.scrollWidth
  • document.body.scrollHeight
  • document.body.offsetWidth
  • document.body.offsetHeight
  • document.body.clientWidth
  • document.body.clientHeight
  • document.documentElement.scrollWidth
  • document.documentElement.scrollHeight
  • document.documentElement.offsetWidth
  • document.documentElement.offsetHeight
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

結果は、下記のとおりです。


















































ブラウザ表示モードスクロールバーで隠れている領域を含むサイズが
取得できるプロパティ
IE 6 標準 document.documentElement.scrollWidth
document.documentElement.scrollHeight
互換 document.body.scrollWidth
document.body.scrollHeight
FireFox 1.5、2.0 標準 document.documentElement.scrollWidth
document.documentElement.scrollHeight
互換 document.body.scrollWidth
document.body.scrollHeight
Opera 9 標準 document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight
互換 document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight
Opera 9.5 標準 document.documentElement.scrollWidth
document.documentElement.scrollHeight
互換 document.body.scrollWidth
document.body.scrollHeight
Safari 2.0.4 標準 document.body.scrollWidth
document.body.scrollHeight
互換 document.body.scrollWidth
document.body.scrollHeight

Opera9では、標準/互換のどちらのモードでもdocument.documentElement.〜,document.body.〜のどっちを参照してもOKという結果になりました。
Opera9.5から、Firefoxなどと同様に、標準と互換で変わるようになりました。(追記@2008/06/13)
Safariでは、モードによる違いはなく、document.body.〜のみを参照しなければならないという結果になりました。


ちなみに、、FireFoxでは、window.scrollMaxX、window.scrollMaxYというプロパティがあって、これらはスクロールバーで隠れた領域のサイズのみを取得することが出来ます。
したがって、スクロールバーが表示されている場合、下記のような関係が成り立ちます。
(下記は標準モードの場合。互換モードはdocumentElement→bodyとして読み替えてください)

[横幅]
document.documentElement.scrollWidth = 
         document.documentElement.clientWidth + window.scrollMaxX 
[縦幅]
document.documentElement.scrollHeight =
         document.documentElement.clientHeight + window.scrollMaxY

なお、表示コンテンツよりブラウザのサイズがが大きい場合(スクロールバーが出ていない状態)には、ここで取れるサイズは、ブラウザの表示領域より小さくなります。
したがって、スクロールバー有無に関わらず、ブラウザで見ることが出来る領域全体を覆うようなレイヤを作りたい場合には、両方のサイズで大きい方を使うことになります。


今回、ウインドウサイズに関するプロパティをいろいろ調べて来ましたが、表示モード(標準/互換)で違うというのが、一番の驚きでした。
後は、他のブラウザ(特にSafari)でどうなるのかが、すごく気になるところです。Safariについても追記しました。(2007/05/20)

Mac欲しい！！Mac mini買いました。