画面操作

画面の座標、スクロール位置/移動、ウィンドウサイズの変更等に関するリファレンス。

お品書き
▲TOP


● window.innerWidth ~IE8 IE9~ FX OP SF GC

【機能】クライアント領域の幅(ピクセル)。※ スクロールバー領域を含む。
【書式】w = window.innerWidth
【 例 】w = window.innerWidth;
【実行結果】

▲TOP


● document.body.clientWidth IE FX OP SF GC

【機能】クライアント領域の幅(ピクセル)。※ スクロールバー領域を含まない。
【書式】w = document.body.clientWidth
【 例 】w = document.body.clientWidth;
【実行結果】

▲TOP


● window.outerWidth ~IE8 IE9~ FX OP SF GC

【機能】ウィンドウ全体の幅(ピクセル)。※ 外枠を含む全体。
【書式】w = window.outerWidth
【 例 】w = window.outerWidth;
【実行結果】

▲TOP


● window.innerHeight ~IE8 IE9~ FX OP SF GC

【機能】クライアント領域の高さ(ピクセル)。※ スクロールバー領域を含む。
【書式】h = window.innerHeight
【 例 】h = window.innerHeight;
【実行結果】

▲TOP


● document.body.clientHeight IE FX OP SF GC

【機能】クライアント領域の高さ(ピクセル)。※ スクロールバー領域を含まない。
【書式】h = document.body.clientHeight
【 例 】h = document.body.clientHeight;
【実行結果】

▲TOP


● window.outerHeight ~IE8 IE9~ FX OP SF GC

【機能】ウィンドウ全体の高さ(ピクセル)。※ 外枠を含む全体。
【書式】w = window.outerHeight
【 例 】w = window.outerHeight;
【実行結果】

▲TOP


● window.scroll() IE FX OP SF GC

【機能】指定の位置までスクロールします。※ scrollは下位互換、scrollTo を使います。
【書式】window.scroll( x, y )
【 例 】window.scroll( 0, 100 );

  ※ scroll(0, 0) は左上隅。単位はピクセル。
▲TOP


● window.scrollTo() IE FX OP SF GC

【機能】指定の位置までスクロールします。
【書式】window.scrollTo( x, y )
【 例 】window.scrollTo( 0, 100 );

  ※ scrollTo(0, 0) は左上隅。単位はピクセル。
▲TOP


● window.scrollBy() IE FX OP SF GC

【機能】現在の位置から 指定したピクセルだけ スクロールします。
【書式】window.scrollBy( x, y )
【 例 】window.scrollBy( 0, -100 );

  ※ x, y は現在位置を基準とした 相対オフセット。
  ※ x, y でスクロール位置のMAX(MIN)を超えた場合は限界まで移動する。
▲TOP


● window.scrollByLines() IE FX OP SF GC

【機能】現在の位置から 指定した行数だけ スクロールします。
【書式】window.scrollByLines( line )
【 例 】window.scrollByLines( -10 );

▲TOP


● window.pageXOffset ~IE8 IE9~ FX OP SF GC

【機能】水平スクロールされているピクセル数。
【書式】x = window.pageXOffset
【 例 】x = window.pageXOffset;
【実行結果】

▲TOP


● window.scrollX ~IE8 IE9~ FX OP SF GC

【機能】水平スクロールされているピクセル数。※ クロスブラウザ互換性の為、window.pageXOffset を使用します。
【書式】x = window.scrollX
【 例 】x = window.scrollX;
【実行結果】

  ※ pageXOffset プロパティは、scrollX プロパティのエイリアスです。
▲TOP


● document.body.scrollLeft IE FX OP SF GC

【機能】水平スクロールされているピクセル数。
【書式】x = document.body.scrollLeft
【 例 】x = document.body.scrollLeft;
【実行結果】

▲TOP


● window.pageYOffset ~IE8 IE9~ FX OP SF GC

【機能】垂直スクロールされているピクセル数。
【書式】y = window.pageYOffset
【 例 】y = window.pageYOffset;
【実行結果】

▲TOP


● window.scrollY ~IE8 IE9~ FX OP SF GC

【機能】垂直スクロールされているピクセル数。※ クロスブラウザ互換性の為、window.pageYOffset を使用します。
【書式】y = window.scrollY
【 例 】y = window.scrollY;
【実行結果】

  ※ pageYOffset プロパティは、scrollY プロパティのエイリアスです。
▲TOP


● document.body.scrollTop IE FX OP SF GC

【機能】垂直スクロールされているピクセル数。
【書式】y = document.body.scrollTop
【 例 】y = document.body.scrollTop;
【実行結果】

▲TOP


● window.resizeTo() IE FX OP SF GC

【機能】ウィンドウのサイズを変更します。
【書式】window.resizeTo( width, height )
【 例 】window.resizeTo( 400, 200 );

  ※ 単位はピクセル。
▲TOP


● window.resizeBy() IE FX OP SF GC

【機能】ウィンドウのサイズを 指定したピクセルだけ 変更します。
【書式】window.resizeBy( x, y )
【 例 】window.resizeBy( -100, -100 );

  ※ x, y は現在のウィンドウサイズを基準とした 相対オフセット。
▲TOP