Hatena::ブログ(Diary)

すたら日記

2009年02月20日

【Javascript】ブラウザの表示領域サイズ取得について

最終更新: 2018年8月2日

目次

  1. 結論
  2. 実験
  3. 実験結果一覧表
  4. 古いブラウザでの実験結果

結論

以下のように求められます。

※ IE6, 7, 8は対象外です。

1. 表示領域の幅 (スクロールバー含まず) =
  document.documentElement.clientWidth;
  $(window).width(); // jQuery

2. 表示領域の高さ (スクロールバー含まず) =
  document.documentElement.clientHeight;
  $(window).height(); // jQuery

3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) =
  window.pageXOffset;
  window.scrollX; // pageXOffsetと同等(エイリアス)
  $(window).scrollLeft(); // jQuery

4. 表示領域左上のY座標 (文書上端から表示領域上端までの距離) =
  window.pageYOffset;
  window.scrollY; // pageYOffsetと同等(エイリアス)
  $(window).scrollTop(); // jQuery

f:id:sutara_lumpur:20120616151411p:image


実験


実験結果一覧表

  • Windows10で検証。
  • IE9とIE10の結果は、IE11でエミュレートしたものです。

【適切に表示領域の幅を取得できるか?】
IE
9, 10, 11
EdgeHTML
17
Firefox
61
Chrome
68

document
.documentElement

.clientWidth
(スクロールバー含まず)

OK OK OK OK

document
.body
.clientWidth

注1 注1 注1 注1

window
.innerWidth

(スクロールバー含む)

OK OK OK OK

$(window).width()
(スクロールバー含まず)

OK OK OK OK
$(document).width() 注2 注2 注2 注2

※注1: 常に<body>の幅。

※注2: ブラウザとbodyの幅を比べて広い方の値。

ブラウザの幅のほうが広い場合、IE9とIE10では、スクロールバーを含めた値となる。



【適切に表示領域の高さを取得できるか?】
IE
9, 10, 11
EdgeHTML
17
Firefox
61
Chrome
68

document
.documentElement
.clientHeight
(スクロールバー含まず)

OK OK OK OK
document
.body
.clientHeight
注1 注1 注1 注1

window
.innerHeight

(スクロールバー含む)

OK OK OK OK

$(window).height()
(スクロールバー含まず)

OK OK OK OK
$(document).height() 注2 注2 注2 注2

※注1: 常に<body>の高さ。

※注2: 常にページ全体の高さを表す。


【適切に、文書左端から表示領域左端までの距離を取得できるか?】
IE
9, 10, 11
EdgeHTML
17
Firefox
61
Chrome
68

document
.documentElement
.scrollLeft

OK 常に0 OK OK
document
.body
.scrollLeft
常に0 OK 常に0 常に0

window
.pageXOffset

OK OK OK OK

$(window).scrollLeft()

OK OK OK OK
$(document).scrollLeft() OK OK OK OK



【適切に、文書上端から表示領域上端までの距離を取得できるか?】
IE
9, 10, 11
EdgeHTML
17
Firefox
61
Chrome
68
document
.documentElement
.scrollTop
OK 常に0 OK OK
document
.body
.scrollTop
常に0 OK 常に0 常に0

window
.pageYOffset

OK OK OK OK
$(window).scrollTop() OK OK OK OK
$(document).scrollTop() OK OK OK OK


古いブラウザでの実験結果

IE6, 7, 8もサポート対象に含める場合は下記のようになります。

3番、4番が少し複雑になっています。

1.x系のjQueryを使えば楽です。

1. 表示領域の幅 (スクロールバー含まず)   =
  document.documentElement.clientWidth;

2. 表示領域の高さ (スクロールバー含まず) =
  document.documentElement.clientHeight;

3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) =
  (document.documentElement.scrollLeft > 0) ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft;

4. 表示領域左上のY座標 (文書上端から表示領域上端までの距離) =
  (document.documentElement.scrollTop > 0) ?
    document.documentElement.scrollTop :
    document.body.scrollTop;

(WindowsXP, WindowsVistaで検証)

【適切に表示領域の幅を取得できるか?】
IE
6, 7, 8
Opera
12.16
Safari
5.1.7
document
.documentElement
.clientWidth

(スクロールバー含まず)

OK OK OK
document
.body
.clientWidth
注1 注1 注1
window
.innerWidth
(スクロールバー含む)
x OK OK

※注1 : ブラウザの表示領域の幅がbodyタグの幅より広い場合はブラウザの幅を、

bodyタグのほうが広い場合はbodyタグの幅を取得。



【適切に表示領域の高さを取得できるか?】
IE
6, 7, 8
Opera
12.16
Safari
5.1.7
document
.documentElement
.clientHeight

(スクロールバー含まず)

OK OK OK
document
.body
.clientHeight
注1 注1 注1
window
.innerHeight
(スクロールバー含む)
x OK OK

※注1 : ブラウザの表示領域の高さがbodyタグの高さより高い場合はブラウザの高さを、

bodyタグのほうが高い場合はbodyタグの高さを取得。



【適切に、文書左端から表示領域左端までの距離を取得できるか?】
IE
6, 7, 8
Opera
12.16
Safari
5.1.7
document
.documentElement
.scrollLeft
OK OK 常に0
document
.body
.scrollLeft
常に0 常に0 OK
window
.pageXOffset
x OK OK



【適切に、文書上端から表示領域上端までの距離を取得できるか?】
IE
6, 7, 8
Opera
12.16
Safari
5.1.7
document
.documentElement
.scrollTop
OK OK 常に0
document
.body
.scrollTop
常に0 常に0 OK
window
.pageYOffset
x OK OK

onozatyonozaty 2009/02/21 01:38 いえいえー。
見にきたら消えていたので、なんだったのかなぁと、気にはなっていました^^;;

sutara_lumpursutara_lumpur 2009/02/21 18:18 onozatyさん、はじめまして。
さぞや気味悪く思われたことでしょう(w

sutara_lumpursutara_lumpur 2009/02/21 18:24 ひとこと告げておけばよかったんですよね。
『関連する記事を書きましたが間違いに気づいたので
いったん削除しました』と…。

通りすがり通りすがり 2010/09/04 17:31 とても分かりやすかったです。
ありがとう。

sutara_lumpursutara_lumpur 2010/09/04 17:39 いえいえ。お役に立ったなら嬉しいです(^ ^)

hanzManhanzMan 2012/11/27 13:40 おかげさまで一挙に思い通りの動作を得ることが出来ました。本当に助かりました。アリガトウございます。(ペコリ)

sutara_lumpursutara_lumpur 2012/11/27 14:00 お役に立てて何よりです (*´∀`*) ホッ

tetsutetsu 2013/04/20 14:41 この「すたら日記」にはほんといつも助けられる。
とてもわかりやすいです。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

Connection: close