Window.scrollbars — Eigenschaft · JavaScript-Referenz

Signatur

Window.scrollbars

Beschreibung

window.scrollbars ist eine schreibgeschützte Eigenschaft. Sie liefert ein Objekt vom Typ BarProp. Dieses Objekt hat nur eine einzige Eigenschaft: visible, ein Wahrheitswert (boolean). Er sagt aus, ob die Scrollleisten des Browserfensters sichtbar sind oder sein können.

Die Eigenschaft gehört zur Familie der sogenannten BarProp-Eigenschaften, zusammen mit window.menubar, window.toolbar, window.locationbar, window.personalbar und window.statusbar. Früher spiegelte sie wider, ob ein Pop-up mit window.open() und der Fensteroption scrollbars=no geöffnet wurde.

In modernen Browsern hat der Wert kaum noch Aussagekraft. Die HTML-Spezifikation legt fest: visible ist true, außer das Fenster ist ein Pop-up, das mit einschränkenden Fensteroptionen geöffnet wurde. Dann ist der Wert false. Ob der Inhalt tatsächlich gerade überläuft und Scrollleisten zeigt, erfährst du über window.scrollbars nicht. Dafür vergleichst du Maße wie scrollHeight und clientHeight.

Typische Einsatzfälle sind daher selten. Die Eigenschaft hilft vor allem, zu erkennen, ob die eigene Seite in einem minimalistischen Pop-up-Fenster läuft, um die Oberfläche anzupassen.

Rückgabewert

Typ

BarProp

Beschreibung

Ein BarProp-Objekt mit der schreibgeschützten Eigenschaft visible (boolean).

Beispiele

Sichtbarkeit der Scrollleisten abfragen

const { visible } = window.scrollbars;
console.log(`Scrollleisten sichtbar: ${visible}`);

Scrollleisten sichtbar: true

Pop-up-Modus erkennen und Oberfläche anpassen

// Läuft die Seite in einem Pop-up mit eingeschränkten Fensteroptionen?
const isPopup = !window.scrollbars.visible || !window.toolbar.visible;

if (isPopup) {
  document.body.classList.add('popup-mode');
  console.log('Kompaktes Layout für Pop-up aktiviert');
} else {
  console.log('Normales Browserfenster');
}

Normales Browserfenster

Alle BarProp-Eigenschaften im Überblick

const bars = ['locationbar', 'menubar', 'personalbar', 'scrollbars', 'statusbar', 'toolbar'];

const status = Object.fromEntries(
  bars.map((name) => [name, window[name]?.visible ?? null])
);

console.table(status);

{ locationbar: true, menubar: true, personalbar: true, scrollbars: true, statusbar: true, toolbar: true }

Tatsächlichen Überlauf prüfen (Alternative)

// window.scrollbars sagt nichts über echten Überlauf aus.
// So prüfst du, ob die Seite wirklich vertikal scrollbar ist:
const root = document.documentElement;
const hasVerticalScroll = root.scrollHeight > root.clientHeight;
const scrollbarWidth = window.innerWidth - root.clientWidth;

console.log({ hasVerticalScroll, scrollbarWidth });

{ hasVerticalScroll: true, scrollbarWidth: 15 }

// Wichtig · Fallstricke

Nicht mit echtem Überlauf verwechseln: scrollbars.visible sagt nicht, ob der Inhalt gerade scrollbar ist. Nutze dafür scrollHeight und clientHeight oder innerWidth - clientWidth. Die letzte Rechnung ergibt bei Overlay-Scrollleisten, etwa unter macOS oder auf Mobilgeräten, oft 0.
Nur lesbar: Früher gab es in Firefox mit erweiterten Rechten Schreibzugriff auf visible. Für Webseiten ist er gesperrt; Zuweisungen werden stillschweigend ignoriert.
Uneinheitliche Werte: Nach aktueller HTML-Spezifikation geben alle BarProp-Eigenschaften denselben Wert zurück. Er hängt nur davon ab, ob das Fenster ein Pop-up ist. Ältere Browser konnten abweichende Werte liefern.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). In Node.js gibt es die Eigenschaft nicht, weil kein window-Objekt existiert. Prüfe bei universellem Code vorher auf typeof window !== 'undefined'.

Siehe auch

BarProp Window.toolbar Window.menubar Window.locationbar Window.statusbar Window.personalbar Window.open() Element.scrollHeight