Window: screenTop-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 Eigenschaft Window.screenTop gibt die vertikale Entfernung in CSS-Pixeln von der oberen Grenze des Benutzer-Browser-Viewports zur oberen Seite des Bildschirms zurück.

Note: screenTop ist ein Alias für die ältere Window.screenY-Eigenschaft. screenTop wurde ursprünglich nur in IE unterstützt, war jedoch aufgrund seiner Beliebtheit überall eingeführt worden.

Wert

Eine Zahl, die der Anzahl von CSS-Pixeln vom oberen Rand des Browser-Viewports zum oberen Rand des Bildschirms entspricht.

Beispiele

In unserem screenleft-screentop Beispiel sehen Sie eine Leinwand, auf die ein Kreis gezeichnet wurde. In diesem Beispiel verwenden wir screenLeft/screenTop zusammen mit Window.requestAnimationFrame(), um den Kreis ständig an derselben physischen Position auf dem Bildschirm neu zu zeichnen, selbst wenn die Fensterposition 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);

Im Code finden Sie auch einen Ausschnitt, der erkennt, ob screenLeft unterstützt wird, und falls nicht, werden screenLeft/screenTop mithilfe von Window.screenX/Window.screenY ergänzt.

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

Spezifikationen

Specification
CSSOM View Module
# dom-window-screentop

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
screenTop
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

Siehe auch