scrollbar-gutter: Layout-Verschiebungen durch Scrollbalken vermeiden

1. Warum ein erscheinender Scrollbalken einen Layout-Shift auslöst

Unter der klassischen overflow: auto-Regel blendet der Browser einen Scrollbalken nur dann ein, wenn der Inhalt tatsächlich die Höhe des Containers überschreitet. Das Problem dabei: Sobald der Balken erscheint, nimmt er auf vielen Betriebssystemen tatsächlichen Platz innerhalb des Containers ein, wodurch sich die verfügbare Content-Breite verringert und jedes darin liegende Element neu umbrechen oder sich verschieben kann. Genau dieser Effekt zeigt sich häufig beim Öffnen eines Dropdown-Menüs, beim Nachladen von Inhalten per Infinite Scroll oder beim Wechsel zwischen zwei Ansichten mit unterschiedlicher Inhaltslänge.

Für Nutzer wirkt ein solcher Sprung wie ein kleiner Ruckler, der die Wahrnehmung der Seite als instabil oder unfertig verstärkt, und für Suchmaschinen zählt er direkt in die Kennzahl Cumulative Layout Shift (CLS), einen der drei Core Web Vitals. Ein Layout, das bei jedem Erscheinen eines Scrollbalkens neu umbricht, verschlechtert damit nicht nur die gefühlte, sondern auch die messbare Qualität der Seite.

2. scrollbar-gutter: stable reserviert Platz dauerhaft

Die Eigenschaft scrollbar-gutter löst dieses Problem, indem sie den Bereich, den ein Scrollbalken einnehmen würde, unabhängig davon reserviert, ob der Balken gerade sichtbar ist. Mit dem Wert stable lässt der Browser diesen Platz dauerhaft frei, egal ob der Inhalt aktuell überläuft oder nicht, wodurch das Erscheinen und Verschwinden des Balkens keine Breitenänderung des Content-Bereichs mehr auslöst. Der Standardwert ist auto, das dem klassischen, Layout-verschiebenden Verhalten entspricht.

Der reservierte Bereich wird als Gutter bezeichnet und verhält sich wie ein zusätzlicher, unsichtbarer Rand am entsprechenden Rand des Containers. Selbst wenn kein Scrollbalken angezeigt wird, bleibt dieser Rand als leerer Raum bestehen, was auf den ersten Blick wie verschwendeter Platz wirkt, tatsächlich aber genau der Preis ist, den ein konsequent stabiles Layout kostet.

/* Platz fuer den Scrollbalken dauerhaft reservieren */
.scroll-container {
  overflow-y: auto;
  scrollbar-gutter: stable;
  max-height: 60vh;
}

3. both-edges: symmetrischen Platz auf beiden Seiten reservieren

Ein zusätzlicher Wert, both-edges, kombiniert mit stable, reserviert nicht nur auf der Seite, auf der der Scrollbalken tatsächlich erscheint, sondern spiegelbildlich auch auf der gegenüberliegenden Seite denselben Platz. Das ist besonders hilfreich für zentrierten Inhalt, der optisch exakt in der Mitte des Viewports bleiben soll: Ohne both-edges würde ein rechts erscheinender Scrollbalken den Inhalt leicht nach links verschieben, weil nur auf einer Seite Platz reserviert wird.

In der Praxis eignet sich both-edges vor allem für modale Dialoge oder zentrierte Layout-Container, bei denen eine optische Verschiebung sofort auffällt, während für normale Seiteninhalte, deren linke Kante ohnehin am Viewport-Rand ausgerichtet ist, das einfache stable in der Regel völlig ausreicht.

/* Zentrierter Modal-Inhalt bleibt optisch mittig,
   auch wenn rechts ein Scrollbalken erscheint */
html {
  scrollbar-gutter: stable both-edges;
}

4. Unterschiede zwischen Betriebssystemen: overlay- vs. klassische Scrollbalken

Wie stark sich ein Layout-Shift überhaupt bemerkbar macht, hängt stark vom Betriebssystem und dessen Scrollbalken-Stil ab. macOS zeigt standardmäßig einen halbtransparenten Overlay-Scrollbalken, der über dem Inhalt schwebt und keinen Platz beansprucht, wodurch das klassische Problem dort in vielen Konfigurationen gar nicht sichtbar wird. Windows und die meisten Linux-Desktop-Umgebungen zeigen dagegen einen klassischen, platzeinnehmenden Scrollbalken, der den verfügbaren Bereich tatsächlich verkleinert.

Diese Unterschiede machen scrollbar-gutter: stable zu einer Absicherung, die auf macOS in vielen Fällen unsichtbar bleibt, auf Windows und Linux aber einen spürbaren Unterschied macht. Wer nur auf einem macOS-Gerät testet, übersieht das Problem deshalb leicht, weshalb ein Test unter Windows oder mit einem erzwungenen klassischen Scrollbalken-Stil vor dem Launch eines neuen Layouts empfehlenswert ist.

5. Kombination mit overflow: wann scrollbar-gutter überhaupt wirkt

scrollbar-gutter wirkt nur auf Elemente, die potenziell scrollbar sind, also einen overflow-Wert ungleich visible besitzen, üblicherweise auto, scroll oder hidden mit zusätzlicher Scroll-Möglichkeit über JavaScript. Auf einem Element mit overflow: visible hat die Eigenschaft keine Wirkung, weil ein solches Element per Definition niemals einen eigenen Scrollbalken zeigt.

Am häufigsten wird scrollbar-gutter zusammen mit overflow-y: auto auf dem html- oder body-Element eingesetzt, um den globalen Seiten-Scrollbalken zu stabilisieren, aber die Kombination funktioniert genauso auf einzelnen Containern wie einem Sidebar-Menü, einem scrollbaren Modal-Body oder einer langen Produktvarianten-Liste, die unabhängig vom Rest der Seite scrollt.

/* Globaler Seiten-Scrollbalken bekommt reservierten Platz,
   sodass Wechsel zwischen kurzen und langen Seiten
   die Content-Breite nicht mehr veraendern */
html {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

6. Typischer Bug: Modal öffnet, Hintergrundinhalt springt zur Seite

Ein besonders verbreiteter Anwendungsfall ist das Öffnen eines Modals, das per JavaScript overflow: hidden auf das body-Element setzt, um Hintergrund-Scrollen zu verhindern. Ohne scrollbar-gutter verschwindet dabei der Scrollbalken der Seite komplett, wodurch der gesamte Seiteninhalt um dessen Breite nach rechts rutscht, sichtbar am kurzen, aber störenden Sprung von Navigation, Logo und Content beim Öffnen und erneut beim Schließen des Modals.

Mit scrollbar-gutter: stable dauerhaft auf dem html-Element gesetzt bleibt der reservierte Platz auch dann bestehen, wenn overflow: hidden aktiv ist und der Balken selbst unsichtbar wird, weil die Eigenschaft den Platz unabhängig vom tatsächlichen overflow-Wert freihält, solange overflow nicht auf visible steht. Der Sprung beim Öffnen und Schließen von Modals verschwindet dadurch vollständig, ohne dass ein einziges JavaScript-Workaround mit manueller Breitenmessung nötig wäre.

7. Layout-Shift messen: DevTools und die Web-Vitals-Extension

Ob ein Scrollbalken-bedingter Layout-Shift tatsächlich vorliegt, lässt sich in den Chrome-DevTools über den Performance-Tab und die dort protokollierten Layout Shift-Einträge nachvollziehen, die genau den betroffenen Zeitpunkt und die verschobenen Elemente anzeigen. Die kostenlose Web Vitals-Browsererweiterung zeigt zusätzlich in Echtzeit den aktuellen CLS-Wert einer Seite an und markiert visuell, welche Elemente sich verschoben haben.

Für einen gezielten Test empfiehlt es sich, eine Seite mit knapp über und knapp unter der Grenze zu laden, ab der ein Scrollbalken erscheint, etwa durch das Hinzufügen oder Entfernen eines einzelnen Listeneintrags, und dabei zu beobachten, ob sich Elemente außerhalb des scrollenden Containers sichtbar verschieben. Bleibt das Layout in beiden Fällen stabil, funktioniert scrollbar-gutter wie vorgesehen.

8. Browser-Unterstützung und ein harmloser Fallback für ältere Browser

Chrome, Edge und Firefox unterstützen scrollbar-gutter in aktuellen Versionen zuverlässig, Safari zog mit einer neueren Version nach, sodass die Eigenschaft mittlerweile in allen großen Browser-Engines ankommt. Ein Browser, der die Eigenschaft nicht kennt, ignoriert die Deklaration einfach und fällt auf das klassische, Layout-verschiebende Verhalten zurück, ganz ohne Fehler oder unerwartete Nebenwirkungen, weil scrollbar-gutter rein additiv wirkt und keine andere Eigenschaft überschreibt.

Das macht den Einsatz risikofrei: Es gibt keinen Grund, auf ein @supports-Feature-Flag oder eine JavaScript-Erkennung zu warten, bevor scrollbar-gutter: stable produktiv eingesetzt wird. Für Nutzer eines nicht unterstützenden Browsers ändert sich schlicht nichts gegenüber dem bisherigen, ohnehin schon bekannten Verhalten, während Nutzer eines unterstützenden Browsers sofort von einem stabileren Layout profitieren.

9. Praxis-Einsatz im Shop: Kategorieseiten, Filterlisten und Checkout

Im Magento- und Hyvä-Kontext lohnt sich scrollbar-gutter: stable besonders auf drei Bereichen: der globalen html-Ebene gegen Sprünge beim Öffnen von Warenkorb- oder Filter-Modals, scrollbaren Filterlisten in der Kategorienavigation, deren Länge je nach gewählten Filtern variiert, und scrollbaren Bereichen im Checkout, etwa einer langen Zahlungsmethoden- oder Versandoptionen-Liste, bei der ein Layout-Shift während eines kritischen Conversion-Schritts besonders schädlich wäre.

Die Umsetzung kostet in Tailwind lediglich eine einzige Utility-Klasse oder eine kurze Zeile im CSS-Layer und erfordert kein zusätzliches JavaScript, keine manuelle Breitenmessung und keine Anpassung an bestehenden Alpine.js-Komponenten. Angesichts des geringen Implementierungsaufwands gegenüber dem spürbaren Stabilitätsgewinn gehört scrollbar-gutter: stable in praktisch jedes moderne Layout mit potenziell scrollbaren Bereichen.

10. Zusammenfassung

11. FAQ: scrollbar-gutter: Das Wichtigste auf einen Blick