---
title: Window.screenY
slug: Web/API/Window/screenY
tags:
  - API
  - CSSOM View
  - Property
  - Read-only
  - Reference
  - Window
translation_of: Web/API/Window/screenY
---
<div>{{APIRef}}</div>

<p><code><strong>Window.screenY</strong></code> は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。</p>

<div class="notecard note">
  <p><strong>注</strong>: <code>screenY</code> の別名である {{domxref("Window.screenTop")}} が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。</p>
</div>

<h2 id="Syntax">構文</h2>

<pre class="brush: js"><em><var>topWindowPos</var> = window.screenY
</em></pre>

<h3 id="Returns">返値</h3>

<p>ブラウザーのビューポートの上端から画面の上端までの CSS ピクセル数に等しい数値です。</p>

<h2 id="Examples">例</h2>

<p><a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> の例では、円が描かれたキャンバスを見ることができます。この例では、 {{domxref("Window.screenLeft")}}/{{domxref("Window.screenTop")}} に加えて {{domxref("Window.requestAnimationFrame()")}} を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。</p>

<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft;
initialTop = window.screenTop + canvasElem.offsetTop;

function positionElem() {
  let newLeft = window.screenLeft + canvasElem.offsetLeft;
  let newTop = window.screenTop + canvasElem.offsetTop;

  let leftUpdate = initialLeft - newLeft;
  let topUpdate = initialTop - newTop;

  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = 'rgb(0, 0, 255)';
  ctx.beginPath();
  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
  ctx.fill();

  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;

  window.requestAnimationFrame(positionElem);
}

window.requestAnimationFrame(positionElem);</pre>

<p>これは <code>screenX</code>/<code>screenY</code> でもまったく同じように動作します。</p>

<p>また、このコードでは <code>screenLeft</code> に対応しているかどうかを検出するスニペットが入っており、対応していない場合は <code>screenLeft</code>/<code>screenTop</code> を
  <code>screenX</code>/<code>screenY</code> で代替するようになっています。</p>

<pre class="brush: js">if(!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}</pre>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table" style="height: 49px; width: 1000px;">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSSOM View', '#dom-window-screeny', 'Window.screenY') }}</td>
   <td>{{ Spec2('CSSOM View') }}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.Window.screenY")}}</p>

<h2 id="See_also">関連情報</h2>

<ul>
 <li>{{domxref("window.screenTop")}}</li>
 <li>{{domxref("window.screenX")}}</li>
</ul>