Signatur
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);
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);
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`);
});
// Wichtig · Fallstricke
- Kein Event beim Verschieben: Wird das Fenster verschoben, gibt es dafür kein
move-Event. Das Ereignisresizefeuert 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
screenYrechnet, sollte das berücksichtigen. - Datenschutz: Manche Browser geben aus Datenschutzgründen nur
0zurück, etwa Firefox mitprivacy.resistFingerprintingoder der Tor-Browser. Unter Wayland unter Linux ist die Fensterposition oft gar nicht verfügbar, dann ist der Wert ebenfalls0. - 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 mitwindow.open()geöffnet hat. - Die Eigenschaft wird von allen modernen Browsern unterstützt. Für sehr alte Internet-Explorer-Versionen ist
screenTopder Fallback.