Window.screenTop — Eigenschaft · JavaScript-Referenz

Signatur

Window.screenTop

Beschreibung

Die schreibgeschützte Eigenschaft window.screenTop gibt an, wie weit die obere Kante des Browserfensters vom oberen Rand des (virtuellen) Bildschirms entfernt ist, gemessen in CSS-Pixeln. Sie ist ein Alias für window.screenY. Ursprünglich wurde sie nur von Internet Explorer und Chromium-Browsern unterstützt. Firefox hat sie ab Version 64 aus Kompatibilitätsgründen ergänzt.

Typische Einsatzzwecke sind das Positionieren von Popup-Fenstern relativ zum aktuellen Fenster (etwa bei OAuth-Anmeldedialogen), das Speichern und Wiederherstellen von Fensterpositionen oder Diagnosen bei Mehrmonitor-Setups. Zusammen mit screenLeft, outerWidth und outerHeight lässt sich die Lage des Fensters auf dem Bildschirm vollständig beschreiben.

Der Wert bezieht sich auf die Koordinaten der gesamten Bildschirmfläche. Bei mehreren Monitoren kann er deshalb größer als screen.height oder auch negativ sein, zum Beispiel wenn ein zweiter Monitor über dem Hauptmonitor liegt. Die Eigenschaft ist schreibgeschützt. Zum Verschieben des Fensters dienen window.moveTo() bzw. window.moveBy(), die meist nur bei selbst geöffneten Popups funktionieren.

Beispiele

Aktuelle Fensterposition auslesen

const top = window.screenTop;
const left = window.screenLeft;
console.log(`Fenster liegt bei x=${left}, y=${top}`);
console.log(window.screenTop === window.screenY);

Fenster liegt bei x=120, y=80 true

Popup zentriert über dem aktuellen Fenster öffnen (z. B. OAuth-Login)

const openCenteredPopup = (url, width = 500, height = 600) => {
  // Fallback für sehr alte Browser ohne screenTop
  const top = window.screenTop ?? window.screenY;
  const left = window.screenLeft ?? window.screenX;

  const y = top + (window.outerHeight - height) / 2;
  const x = left + (window.outerWidth - width) / 2;

  return window.open(
    url,
    'login',
    `width=${width},height=${height},top=${Math.round(y)},left=${Math.round(x)}`
  );
};

document.querySelector('#login')
  .addEventListener('click', () => openCenteredPopup('/auth/start'));

Fensterposition merken und prüfen, ob sie sich geändert hat

const STORAGE_KEY = 'lastWindowPos';

const savePosition = () => {
  const pos = { top: window.screenTop, left: window.screenLeft };
  localStorage.setItem(STORAGE_KEY, JSON.stringify(pos));
};

// Ein Event für Fensterbewegungen gibt es nicht – daher Polling
let lastTop = window.screenTop;
setInterval(() => {
  if (window.screenTop !== lastTop) {
    console.log(`Fenster vertikal verschoben: ${lastTop} → ${window.screenTop}`);
    lastTop = window.screenTop;
    savePosition();
  }
}, 500);

Fenster vertikal verschoben: 80 → 240

// Wichtig · Fallstricke

Kompatibilität: Firefox unterstützt screenTop erst ab Version 64. Für ältere Umgebungen ist window.screenY der sichere Fallback (window.screenTop ?? window.screenY).
Negative Werte: Bei mehreren Monitoren kann der Wert negativ sein oder größer als screen.height. Rechne nicht mit einem Bereich ab 0.
Kein Event: Wenn das Fenster verschoben wird, feuert kein Ereignis. Änderungen lassen sich nur per Polling erkennen.
Datenschutz: Manche Browser (z. B. Firefox mit privacy.resistFingerprinting, Tor Browser) liefern zum Schutz vor Fingerprinting gerundete Werte oder 0.
Mobile Browser: Auf Smartphones und Tablets ist der Wert meist 0 und bringt wenig.
Zoom und Skalierung: Der Wert ist in CSS-Pixeln angegeben. Seitenzoom und devicePixelRatio können ihn gegenüber physischen Pixeln verschieben.
Der Wert lässt sich nicht setzen. Zum Verschieben dient window.moveTo(), das nur bei per Skript geöffneten Popups zuverlässig funktioniert.

Siehe auch

Window.screenY Window.screenLeft Window.screenX Window.outerHeight Window.moveTo() Window.open() Screen