Start · Sprachen · JavaScript · Referenz · Window.screenY

Window.screenY

Eigenschaft

Liefert den vertikalen Abstand in CSS-Pixeln vom oberen Rand des Browserfensters zum oberen Rand des Bildschirms (nur lesbar).

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

Window.screenY

Beschreibung

window.screenY ist eine nur lesbare Eigenschaft. Sie gibt an, wie weit die Oberkante des äußeren Browserfensters, also samt Titelleiste, Tabs und Symbolleisten, von der Oberkante des Bildschirms entfernt ist. Der Wert wird in CSS-Pixeln angegeben. window.screenTop ist ein Alias mit identischem Wert, der ursprünglich aus dem Internet Explorer stammt.

Man braucht die Eigenschaft vor allem für Fensterverwaltung: um Popups relativ zum aktuellen Fenster zu platzieren (z. B. zentriert über window.open()), um die Fensterposition zu speichern und später wiederherzustellen, oder um zusammen mit MouseEvent.screenY Koordinaten zwischen Bildschirm und Fenster umzurechnen.

Bei mehreren Monitoren bezieht sich der Wert auf den gesamten virtuellen Bildschirmbereich. Liegt ein zweiter Monitor über dem Hauptmonitor, kann der Wert deshalb negativ sein. Außerdem hängt der Wert vom Zoomfaktor ab, weil CSS-Pixel keine Gerätepixel sind.

Beispiele

Fensterposition auslesen

const { screenX, screenY } = window;
console.log(`Fenster steht bei x=${screenX}, y=${screenY}`);
// screenTop ist ein Alias
console.log(window.screenY === window.screenTop);
Fenster steht bei x=120, y=80 true

Popup zentriert über dem aktuellen Fenster öffnen

const openCenteredPopup = (url, width = 500, height = 400) => {
  const left = window.screenX + (window.outerWidth - width) / 2;
  const top = window.screenY + (window.outerHeight - height) / 2;
  return window.open(
    url,
    'login',
    `popup,width=${width},height=${height},left=${Math.round(left)},top=${Math.round(top)}`
  );
};

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

Positionsänderung des Fensters erkennen (Polling)

// Für das Verschieben des Fensters gibt es kein Standard-Event
let lastY = window.screenY;

const timer = setInterval(() => {
  if (window.screenY !== lastY) {
    console.log(`Fenster vertikal verschoben: ${lastY} → ${window.screenY}`);
    lastY = window.screenY;
  }
}, 500);

// Später aufräumen: clearInterval(timer);
Fenster vertikal verschoben: 80 → 212

Bildschirmkoordinate eines Klicks relativ zum Fenster

document.addEventListener('click', (event) => {
  // Abstand des Klicks zur Oberkante des äußeren Fensters (inkl. Browser-UI)
  const offsetInWindow = event.screenY - window.screenY;
  console.log(`Klick ${offsetInWindow}px unter der Fensteroberkante`);
});
Klick 245px unter der Fensteroberkante

// Wichtig · Fallstricke

  • Kein Event beim Verschieben: Wird das Fenster verschoben, gibt es dafür kein move-Event. Das Ereignis resize feuert nur, wenn sich die Größe ändert. Wer Positionsänderungen erkennen will, muss den Wert regelmäßig abfragen (Polling).
  • Negative Werte: Bei mehreren Monitoren kann der Wert negativ sein. Code, der mit screenY rechnet, sollte das berücksichtigen.
  • Datenschutz: Manche Browser geben aus Datenschutzgründen nur 0 zurück, etwa Firefox mit privacy.resistFingerprinting oder der Tor-Browser. Unter Wayland unter Linux ist die Fensterposition oft gar nicht verfügbar, dann ist der Wert ebenfalls 0.
  • iframes: Auch in einem iframe beschreibt der Wert die Position des obersten Browserfensters, nicht die des iframes.
  • Nicht beschreibbar: Einfach einen neuen Wert zuzuweisen verschiebt das Fenster nicht. Dafür gibt es window.moveTo() bzw. moveBy(). Diese Methoden funktionieren meist nur bei Popups, die das Skript selbst mit window.open() geöffnet hat.
  • Die Eigenschaft wird von allen modernen Browsern unterstützt. Für sehr alte Internet-Explorer-Versionen ist screenTop der Fallback.