このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Window: screenY プロパティ
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
Window.screenY は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。
メモ:screenY の別名であるWindow.screenTop が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。
値
ブラウザーのビューポートの上端から画面の上端までの CSS ピクセル数に等しい数値です。
例
screenleft-screentop の例では、円が描かれたキャンバスを見ることができます。この例では、Window.screenLeft/Window.screenTop に加えてWindow.requestAnimationFrame() を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。
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);これはscreenX/screenY でもまったく同じように動作します。
また、このコードではscreenLeft に対応しているかどうかを検出するスニペットが入っており、対応していない場合はscreenLeft/screenTop をscreenX/screenY で代替するようになっています。
if (!window.screenLeft) { window.screenLeft = window.screenX; window.screenTop = window.screenY;}仕様書
| Specification |
|---|
| CSSOM View Module # dom-window-screeny |