Window.innerHeight — Eigenschaft · JavaScript-Referenz

Signatur

Window.innerHeight

Beschreibung

Die schreibgeschützte Eigenschaft window.innerHeight gibt die Höhe des Anzeigebereichs (Layout-Viewport) des Fensters in CSS-Pixeln als Ganzzahl zurück. Mitgezählt wird dabei die Höhe einer horizontalen Scrollleiste, falls eine angezeigt wird. Browser-Oberfläche wie Tab-Leiste, Adressleiste oder Lesezeichenleiste zählt nicht dazu; dafür gibt es window.outerHeight.

Typische Einsatzfälle sind responsive Layouts, die per JavaScript berechnet werden, die Frage, ob ein Element im sichtbaren Bereich liegt (zusammen mit getBoundingClientRect()), Endlos-Scrolling („Ist das Seitenende erreicht?“) und der bekannte Workaround für 100vh auf Mobilgeräten über eine CSS-Variable.

Brauchen Sie die Höhe ohne Scrollleiste, nehmen Sie document.documentElement.clientHeight. Für den tatsächlich sichtbaren Bereich bei Pinch-Zoom oder eingeblendeter Bildschirmtastatur ist window.visualViewport.height die genauere Quelle.

Innerhalb eines <iframe> liefert innerHeight die Höhe des Frames selbst, nicht die des obersten Fensters.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Höhe des Layout-Viewports in CSS-Pixeln, einschließlich einer horizontalen Scrollleiste. Nur lesbar.

Beispiele

Viewport-Höhe mit und ohne Scrollleiste vergleichen

const mitScrollbar = window.innerHeight;
const ohneScrollbar = document.documentElement.clientHeight;

console.log(`innerHeight: ${mitScrollbar}px`);
console.log(`clientHeight: ${ohneScrollbar}px`);
console.log(`Horizontale Scrollleiste: ${mitScrollbar - ohneScrollbar}px`);

innerHeight: 900px clientHeight: 883px Horizontale Scrollleiste: 17px

Mobiler 100vh-Workaround über eine CSS-Variable

// Setzt --vh auf 1 % der echten Viewport-Höhe
const setViewportHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

setViewportHeight();
window.addEventListener('resize', setViewportHeight);

// Im CSS dann z. B.: height: calc(var(--vh, 1vh) * 100);

Endlos-Scrolling: Seitenende erkennen

const loadMore = async () => {
  const res = await fetch('/api/posts?page=2');
  const posts = await res.json();
  console.log(`${posts.length} weitere Beiträge geladen`);
};

let loading = false;
window.addEventListener('scroll', async () => {
  const nearBottom =
    window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 200;
  if (nearBottom && !loading) {
    loading = true;
    await loadMore();
    loading = false;
  }
}, { passive: true });

10 weitere Beiträge geladen

Prüfen, ob ein Element vollständig sichtbar ist

const isFullyVisible = (el) => {
  const { top, bottom } = el.getBoundingClientRect();
  return top >= 0 && bottom <= window.innerHeight;
};

const banner = document.querySelector('#cookie-banner');
if (banner) console.log(isFullyVisible(banner));

true

// Wichtig · Fallstricke

Inklusive Scrollleiste: innerHeight schließt eine horizontale Scrollleiste ein. Für Layout-Berechnungen ist deshalb oft document.documentElement.clientHeight passender.
Mobilgeräte: Wenn Adressleiste oder Bildschirmtastatur ein- und ausgeblendet werden, ändert sich der Wert und es feuert resize. Den tatsächlich sichtbaren Bereich liefert window.visualViewport.height. In modernem CSS lösen die Einheiten dvh, svh und lvh den --vh-Workaround weitgehend ab.
Nur lesbar: Eine Zuweisung ändert die Fenstergröße nicht. Dafür gibt es window.resizeTo(), das aber nur bei per Skript geöffneten Pop-ups funktioniert.
Performance: Wird der Wert gelesen, nachdem das DOM geändert wurde, kann das ein erzwungenes Reflow auslösen. In scroll- und resize-Handlern sollten Sie den Wert zwischenspeichern oder die Aufrufe drosseln (Debounce oder requestAnimationFrame). Für Sichtbarkeitsprüfungen ist IntersectionObserver meist die bessere Wahl.
Zoom: Beim Browser-Zoom ändert sich der Wert, weil er in CSS-Pixeln angegeben wird, nicht in Gerätepixeln.
Die Eigenschaft wird von allen Browsern unterstützt, auch von sehr alten. Im IE 8 und älter gab es sie nicht.

Siehe auch

Window.innerWidth Window.outerHeight Element.clientHeight Window.visualViewport Window.scrollY