Window: screenY-Eigenschaft

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die schreibgeschützte Window.screenY-Eigenschaft gibt die vertikale Distanz in CSS-Pixeln von der oberen Grenze des Browser-Viewports des Benutzers zur oberen Kante des Bildschirms zurück.

Hinweis: Ein Alias von screenY wurde in letzter Zeit in modernen Browsern implementiert — Window.screenTop. Dieser wurde ursprünglich nur in IE unterstützt, aber aufgrund seiner Beliebtheit überall eingeführt.

Wert

Eine Zahl, die der Anzahl der CSS-Pixel von der oberen Kante des Browser-Viewports zur oberen Kante des Bildschirms entspricht.

Beispiele

In unserem screenleft-screentop-Beispiel sehen Sie eine Leinwand, auf die ein Kreis gezeichnet wurde. In diesem Beispiel verwenden wir Window.screenLeft/Window.screenTop zusammen mit Window.requestAnimationFrame(), um den Kreis konstant an derselben physischen Position auf dem Bildschirm neu zu zeichnen, selbst wenn die Position des Fensters verschoben wird.

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);

Diese funktionieren genau in derselben Weise wie screenX/screenY.

Im Code fügen wir auch einen Schnipsel ein, der erkennt, ob screenLeft unterstützt wird, und falls nicht, screenLeft/screenTop mit Hilfe von screenX/screenY auffüllt.

js
if (!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}

Spezifikationen

Specification
CSSOM View Module
# dom-window-screeny

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
screenY
Relative to the Multi-screen origin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.

Siehe auch