28699


**JavaScriptで座標処理を行いたいのですが、基本用語が分かりません**  
・下記認識で合っているでしょうか？

* * *

**モニタのスクリーン領域**  
・常に固定  
・screenY。スクロールしても影響なし

**ブラウザのクライアント領域**  
・可変  
・pageY。スクロールすると影響あり  
・clientY。スクロールしても影響なし

* * *

**質問**  
・「ウインドウ領域」「レイヤー領域」「画面領域」「ページ領域」とは？  
・上記何れをさす言葉？ それとも別の概念？ あるいは文脈によるので一概には言えない？


CC BY-SA 3.0
2016-09-05T01:30:12.923
28684
2016-09-05T09:43:08.970
7886
question
javascript
スクリーン、ウインドウ、ブラウザ、ページ、レイヤーの違い。座標に関して、スクロールした時に影響を受けるのは？


MouseEvent の各プロパティの話であれば、[CSSOM View Module](https://drafts.csswg.org/cssom-
view/#extensions-to-the-mouseevent-interface) にまとめて定義されています。

  * screenX/Y: スクリーン領域（出力デバイスの領域）からの距離
  * pageX/Y: 初期包含ブロック（ルート要素など）からの距離
  * clientX/Y: viewportからの距離
  * offsetX/Y: `event.target` のpadding edge（paddingの外側）からの距離

よって、マウスカーソルを動かさずページ全体をスクロールした際に変化しないのは、
screenYやclientYということになります。一方、マウスカーソルの位置に何かを表示したいといった場合にはページ上の相対位置で指定する場面が多いですから、この場合はpageYやoffsetYを使うことになります。

その他の言葉については、画面・ウィンドウ・ページに関しては見ての通りだろうと思いますが、レイヤーに関しては微妙です。少なくともHTMLやCSSにそのような概念はなかったはずです。

[![画像の説明をここに入力](https://i.stack.imgur.com/ihSr6.png)](https://i.stack.imgur.com/ihSr6.png)


CC BY-SA 3.0
2016-09-05T09:43:08.970
28699
2016-09-05T09:43:08.970
8000
28684
answer